A modular and customizable UI library based on Material Design and Vue 3
A modular and customizable UI library based on Material Design and Vue 3
Recommended Choice\uff1aChrome
\n@use 'balm-ui/plugins/alert' with (\n $width: 450px\n);\n@use 'balm-ui/components/badge' with (\n $background-color: #db4437,\n $color: #fff,\n $border-radius: 10px,\n $dot-radius: 3px\n);\n@use 'balm-ui/components/bottom-sheet' with (\n $background: white,\n $border-top-radius: 0,\n\n $scrim-color: on-surface,\n $scrim-opacity: 0.32\n);\n@use '@material/button/button-shared-theme' with (\n $height: 36px,\n $horizontal-padding: 8px,\n $contained-horizontal-padding: 16px,\n // For a contained button with an icon, the padding on the side of the\n // button with the icon.\n $contained-horizontal-padding-icon: 12px,\n\n $minimum-height: 24px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n\n $shape-radius: small,\n\n $disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38),\n $disabled-container-color: rgba(\n theme-color.prop-value(on-surface),\n 0.12\n ),\n);\n@use '@material/button/button-outlined-theme' with (\n $outlined-border-width: 1px,\n $outline-color: rgba(theme-color.prop-value(on-surface), 0.12)\n);\n@use '@material/card' as card-variables with (\n $action-icon-color: rgba(\n theme-color.prop-value(on-surface),\n theme-color.text-emphasis(medium)\n ),\n $outline-color: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 12%\n ),\n $outline-width: 1px,\n $shape-radius: medium\n);\n@use 'balm-ui/components/card' with (\n $text-wrapper-padding: 16px\n);\n@use '@material/checkbox/checkbox-theme' with (\n $baseline-theme-color: secondary,\n $mark-color: theme-color.prop-value(on-secondary),\n $border-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $disabled-color: rgba(theme-color.prop-value(on-surface), 0.38),\n\n $ripple-size: 40px,\n $icon-size: 18px,\n $mark-stroke-size: 2 / 15 * $icon-size,\n $border-width: 2px,\n $transition-duration: 90ms,\n $item-spacing: 4px,\n $focus-indicator-opacity: map.get(\n ripple-theme.$dark-ink-opacities,\n focus\n ),\n\n $minimum-size: 28px,\n $maximum-size: $ripple-size,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n size: (\n minimum: $minimum-size,\n default: $ripple-size,\n maximum: $maximum-size,\n ),\n )\n);\n\u26a0\ufe0f The
deprecatedpath is required inbalm-ui>= 9.20.0
@use '@material/chips/deprecated/variables' with (\n $fill-color-default: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 12%\n ),\n $ink-color-default: rgba(theme-color.prop-value(on-surface), 0.87),\n $horizontal-padding: 12px,\n $height: 32px,\n $shape-radius: 50%,\n\n $minimum-height: 24px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n\n $icon-color: theme-color.prop-value(on-surface),\n $icon-opacity: 0.54,\n $trailing-icon-hover-opacity: 0.62,\n $trailing-icon-focus-opacity: 0.87,\n $leading-icon-size: 20px,\n $trailing-icon-size: 18px,\n // Speed up delay to bridge gap between leading icon and checkmark transition.\n $leading-icon-delay: -50ms,\n $checkmark-with-leading-icon-delay: 80ms,\n\n $checkmark-animation-delay: 50ms,\n $checkmark-animation-duration: 150ms,\n $width-animation-duration: 150ms,\n $opacity-animation-duration: 75ms,\n\n $leading-icon-margin-right: 4px,\n $leading-icon-margin-left: -4px,\n\n $trailing-icon-margin-right: -4px,\n $trailing-icon-margin-left: 4px,\n\n $exit-transition: opacity 75ms\n animation-variables.$standard-curve-timing-function,\n width 150ms animation-variables.$deceleration-curve-timing-function,\n padding 100ms linear, margin 100ms linear\n);\n@use 'balm-ui/components/collapse' with (\n $collapse-margin-bottom: 0,\n $header-margin-bottom: 0,\n $title-padding: 8px 0,\n $icon-width: 24px,\n $icon-margin-right: 8px,\n $content-padding: 8px 0\n);\n@use 'balm-ui/plugins/confirm' with (\n $width: 450px\n);\n@use '@material/dialog' with (\n $scrim-color: on-surface,\n $title-ink-color: on-surface,\n $content-ink-color: on-surface,\n $scroll-divider-color: on-surface,\n\n $scrim-opacity: 0.32,\n $title-ink-opacity: 0.87,\n $content-ink-opacity: 0.6,\n $scroll-divider-opacity: 0.12,\n\n $min-width: 280px,\n $max-width: 560px,\n $margin: 16px,\n $shape-radius: medium,\n $title-bottom-padding: 9px,\n $actions-padding: 8px,\n // New in 9.12.0\n $header-side-padding: 24px,\n\n // New in 9.14.0\n $close-icon-padding: 12px,\n $title-side-padding: 16px,\n $fullscreen-header-side-padding: 16px,\n\n // New in 10.5.0\n $sheet-close-icon-right: 12px,\n $sheet-close-icon-top: 9px,\n\n $z-index: 7\n);\n@use 'balm-ui/components/divider' with (\n $color: if(\n theme-color.tone(theme-color.$background) == 'dark',\n list-variables.$deprecated-divider-color-on-dark-bg,\n list-variables.$deprecated-divider-color-on-light-bg\n ),\n\n $horizontal-height: 2px,\n $horizontal-text-padding: 8px 16px,\n\n $vertical-width: 2px,\n $vertical-text-padding: 16px 8px\n);\n@use '@material/drawer' with (\n // Colors\n $title-ink-color: theme-color.prop-value(on-surface),\n $subtitle-ink-color: theme-color.prop-value(on-surface),\n $item-inactive-ink-color: theme-color.prop-value(on-surface),\n $item-activated-ink-color: theme-color.prop-value(primary),\n $divider-color: theme-color.prop-value(on-surface),\n $surface-fill-color: surface,\n\n // Opacity\n $title-ink-opacity: theme-color.text-emphasis(high),\n $subtitle-ink-opacity: theme-color.text-emphasis(medium),\n $item-inactive-icon-ink-opacity: theme-color.text-emphasis(medium),\n $item-inactive-text-ink-opacity: theme-color.text-emphasis(high),\n $item-active-icon-ink-opacity: 1,\n $item-active-text-ink-opacity: theme-color.text-emphasis(high),\n $divider-opacity: 0.12,\n\n // Widths\n $width: 256px,\n $list-item-spacing: 4px,\n $surface-padding: 16px,\n $shape-radius: large,\n $item-shape-radius: small,\n\n // Animations\n $animation-enter: 250ms,\n $animation-exit: 200ms,\n\n // Scrim\n $modal-scrim-color: theme-color.prop-value(on-surface),\n $modal-scrim-opacity: 0.32,\n\n $z-index: 6,\n $modal-elevation: 16\n);\n@use 'balm-ui/components/editor' with (\n $editor-height: 100%,\n $bubble-editor-height: 100px,\n\n $font-family: (\n 'arial': 'Arial',\n 'arial-black': 'Arial Black',\n 'comic-sans-ms': 'Comic Sans MS',\n 'courier-new': 'Courier New',\n 'tahoma': 'Tahoma',\n 'georgia': 'Georgia',\n 'helvetica': 'Helvetica',\n 'segoe-ui': 'Segoe UI',\n 'sans-serif': 'Sans-Serif',\n 'impact': 'Impact',\n 'times-new-roman': 'Times New Roman',\n 'verdana': 'Verdana'\n )\n);\n@use '@material/elevation/variables' with (\n $baseline-color: black,\n $umbra-opacity: 0.2,\n $penumbra-opacity: 0.14,\n $ambient-opacity: 0.12,\n\n // The default duration value for elevation transitions.\n $transition-duration: 280ms\n);\n@use '@material/fab/fab-theme' with (\n $height: 56px,\n $mini-height: 40px,\n $shape-radius: 50%\n);\n@use '@material/fab/extended-fab-theme' with (\n $extended-icon-padding: 12px,\n $extended-label-padding: 20px,\n $extended-height: 48px\n);\n@use 'balm-ui/components/form' with (\n $form-margin: 0,\n $form-padding: 0,\n $form-border: 0,\n\n $form-item-margin-bottom: 0,\n $horizontal-form-item-label-width: auto,\n $horizontal-form-item-label-margin-right: 0,\n $vertical-form-item-label-margin-bottom: 0,\n\n $form-subitem-margin-right: 0 // New in 9.9.0\n);\n@use '@material/layout-grid' with (\n $breakpoints: (\n desktop: 840px,\n tablet: 600px,\n phone: 0px\n ),\n\n $columns: (\n desktop: 12,\n tablet: 8,\n phone: 4\n ),\n\n $default-margin: (\n desktop: 24px,\n tablet: 16px,\n phone: 16px\n ),\n\n $default-gutter: (\n desktop: 24px,\n tablet: 16px,\n phone: 16px\n ),\n\n $column-width: (\n desktop: 72px,\n tablet: 72px,\n phone: 72px\n ),\n\n $default-column-span: 4,\n\n $max-width: null\n);\n@use '@material/icon-button' with (\n $icon-size: 24px,\n $size: 48px,\n $minimum-height: 28px,\n $maximum-height: $size,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n size: (\n default: $size,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n);\n@use 'balm-ui/components/icon' with (\n $font-path: '../fonts',\n $with-subdir: 0,\n\n $sizes: 18 24 36 48,\n $dark: rgba(0, 0, 0, 0.54),\n $dark-focused: rgba(0, 0, 0, 0.87), // New in 9.19.0\n $dark-inactive: rgba(0, 0, 0, 0.38),\n $light: rgba(255, 255, 255, 0.7),\n $light-focused: rgba(255, 255, 255, 1), // New in 9.19.0\n $light-inactive: rgba(255, 255, 255, 0.5),\n\n $success: #0f9d58,\n $info: #4285f4,\n $warning: #f4b400,\n $error: #db4437\n);\n@use '@material/image-list' with (\n $standard-gutter-size: 4px,\n $masonry-gutter-size: 16px,\n $icon-size: 24px,\n $text-protection-background-color: rgba(0, 0, 0, 0.6),\n $text-protection-height: 48px,\n $text-protection-horizontal-padding: 16px,\n $shape-radius: 0\n);\n\u26a0\ufe0f The
deprecated-prefix is required inbalm-ui>= 9.14.0
@use '@material/list' with (\n $deprecated-divider-color-on-light-bg: rgba(0, 0, 0, 0.12),\n $deprecated-divider-color-on-dark-bg: rgba(255, 255, 255, 0.2),\n $deprecated-side-padding: 16px,\n $deprecated-trailing-padding: 16px,\n $deprecated-text-offset: 72px,\n $deprecated-text-disabled-opacity: theme-color.text-emphasis(disabled),\n $deprecated-text-disabled-color: on-surface,\n $deprecated-text-selected-color: primary,\n\n $deprecated-single-line-height: 48px,\n $deprecated-single-line-minimum-height: 24px,\n $deprecated-single-line-maximum-height: $deprecated-single-line-height,\n $deprecated-single-line-density-scale: density-variables.$default-scale,\n $deprecated-single-line-density-config: (\n height: (\n default: $deprecated-single-line-height,\n maximum: $deprecated-single-line-maximum-height,\n minimum: $deprecated-single-line-minimum-height,\n ),\n ),\n\n $deprecated-item-primary-text-baseline-height: 28px,\n $deprecated-item-primary-text-baseline-height-with-graphic: 32px,\n $deprecated-item-secondary-text-baseline-height: 20px,\n $deprecated-dense-item-primary-text-baseline-height: 24px,\n\n $deprecated-two-line-height: 64px,\n $deprecated-two-line-graphic-height: 72px,\n $deprecated-two-line-icon-top-margin: 16px,\n\n $deprecated-deprecated-graphic-config: (\n graphic-size: (\n width: 24px,\n height: 24px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-textual-variant-config: (\n single-line-height: $deprecated-single-line-height,\n graphic-size: (\n width: 24px,\n height: 24px,\n ),\n leading-padding: 16px,\n text-offset: 16px,\n ),\n\n $deprecated-icon-variant-config: (\n single-line-height: 56px,\n graphic-size: (\n width: 24px,\n height: 24px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-avatar-variant-config: (\n single-line-height: 56px,\n graphic-size: (\n width: 40px,\n height: 40px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-thumbnail-variant-config: (\n single-line-height: 56px,\n graphic-size: (\n width: 40px,\n height: 40px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-image-variant-config: (\n single-line-height: 72px,\n graphic-size: (\n width: 56px,\n height: 56px,\n ),\n leading-padding: 16px,\n text-offset: 88px,\n ),\n\n $deprecated-video-variant-config: (\n single-line-height: 72px,\n graphic-size: (\n width: 100px,\n height: 56px,\n ),\n leading-padding: 0px,\n text-offset: 116px,\n ),\n);\n@use '@material/menu-surface' with (\n $fade-in-duration: 0.03s,\n $fade-out-duration: 0.075s,\n $scale-duration: 0.12s,\n $min-distance-from-edge: 32px,\n $z-index: 8, // One above `<ui-dialog>`\n $shape-radius: medium\n);\n@use '@material/menu' with (\n $ink-color: rgba(\n theme-color.prop-value(on-surface),\n theme-color.text-emphasis(high)\n ),\n\n $width-base: 56px,\n $min-width: 2 * $width-base\n);\n@use 'balm-ui/components/navigation-bar' with (\n $height: 48px,\n $stacked-height: 72px,\n $color: theme-variables.$primary,\n $fill-color: white,\n $active-fill-color: rgba($color, 0.87)\n);\n@use 'balm-ui/components/pagination' with (\n $height: 32px\n);\n@use '@material/linear-progress' with (\n $baseline-buffer-color: #e6e6e6\n);\n@use '@material/radio/radio-theme' with (\n $ripple-size: 40px,\n $icon-size: 20px,\n $transition-duration: 120ms,\n $ripple-opacity: 0.14,\n $baseline-theme-color: secondary,\n $unchecked-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $disabled-circle-color: rgba(theme-color.prop-value(on-surface), 0.38),\n\n $minimum-size: 28px,\n $maximum-size: $ripple-size,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n size: (\n minimum: $minimum-size,\n default: $ripple-size,\n maximum: $maximum-size,\n ),\n )\n);\n@use 'balm-ui/components/rangepicker' with (\n $separator-padding: 8px\n);\n@use '@material/ripple/ripple-theme' with (\n $fade-in-duration: 75ms,\n $fade-out-duration: 150ms,\n $translate-duration: 225ms,\n $states-wash-duration: 15ms,\n\n // Notes on states:\n // * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies)\n // * press state applies to a separate pseudo-element, so it has an additive effect on top of other states\n // * selected/activated are applied additively to hover/focus via calculations at preprocessing time\n\n $dark-ink-opacities: (\n hover: 0.04,\n focus: 0.12,\n press: 0.12,\n selected: 0.08,\n activated: 0.12,\n ),\n\n $light-ink-opacities: (\n hover: 0.08,\n focus: 0.24,\n press: 0.24,\n selected: 0.16,\n activated: 0.24,\n ),\n\n // Legacy\n\n $pressed-dark-ink-opacity: 0.16,\n $pressed-light-ink-opacity: 0.32,\n);\n<ui-select-icon>@use '@material/select/select-icon-theme' with (\n $icon-size: 24px,\n $dense-icon-size: 20px,\n $icon-horizontal-margin: 12px,\n\n $icon-color: rgba(theme-variables.prop-value(on-surface), 0.54),\n $disabled-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n )\n);\n<ui-select>@use '@material/select/select-theme' with (\n $arrow-padding: 52px,\n $label-padding: 16px,\n $height: 56px,\n $filled-baseline-top: 40px,\n $selected-text-height: 28px,\n $anchor-padding-left: 16px,\n $anchor-padding-left-with-leading-icon: 0,\n $anchor-padding-right: 0,\n $outlined-stroke-width: 2px,\n $default-width: 200px,\n $shape-radius: small,\n\n $minimum-height: 40px,\n $minimum-height-for-filled-label: 52px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n\n $ink-color: rgba(theme-variables.prop-value(on-surface), 0.87),\n $dropdown-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.54\n ),\n $label-color: rgba(theme-variables.prop-value(on-surface), 0.6),\n $focused-label-color: rgba(theme-variables.prop-value(primary), 0.87),\n $bottom-line-idle-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.42\n ),\n $bottom-line-hover-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.87\n ),\n\n $fill-color: color.mix(\n theme-variables.prop-value(on-surface),\n theme-variables.prop-value(surface),\n 4%\n ),\n\n // Disabled Styles\n $disabled-label-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $disabled-ink-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $disabled-fill-color: color.mix(\n theme-variables.prop-value(on-surface),\n theme-variables.prop-value(surface),\n 2%\n ),\n $disabled-fill-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n ),\n $disabled-bottom-line-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n ),\n $disabled-dropdown-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $disabled-outline-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n ),\n\n $outlined-idle-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $outlined-hover-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.87\n ),\n\n $label-position-y: 106%,\n $outline-label-offset: 16px,\n $outlined-label-position-y: get-outlined-label-position-y($height),\n $outlined-with-leading-icon-label-position-x: 32px,\n\n $dropdown-transition-duration: 150ms,\n // Transition durartions to active state\n $icon-active-fade-out-duration: 0.33 * $dropdown-transition-duration,\n $icon-active-fade-in-duration: 0.67 * $dropdown-transition-duration,\n // Transition durartions to inactive state\n $icon-inactive-fade-out-duration: 0.5 * $dropdown-transition-duration,\n $icon-inactive-fade-in-duration: 0.5 * $dropdown-transition-duration,\n\n // Error colors\n $error-color: error\n);\n@use '@material/shape/shape' with (\n // Shape categories\n $small-component-radius: 4px,\n $medium-component-radius: 4px,\n $large-component-radius: 0\n);\n@use 'balm-ui/components/side-sheet' with (\n $width: 40%,\n $mobile-width: 80%,\n $background: white,\n $border-left-radius: 0,\n\n $scrim-color: on-surface,\n $scrim-opacity: 0.32\n);\n@use 'balm-ui/components/skeleton' with (\n $avatar: (\n base: 36px,\n large: 40px,\n small: 24px\n ),\n\n $color: #f2f2f2,\n $to-color: global-function.shade($color, 10%)\n);\n@use '@material/snackbar' with (\n $fill-color: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 80%\n ),\n $label-ink-color: rgba(\n theme-color.prop-value(surface),\n theme-color.text-emphasis(high)\n ),\n $action-ink-color: #bb86fc,\n $dismiss-ink-color: rgba(\n theme-color.prop-value(surface),\n theme-color.text-emphasis(high)\n ),\n\n $label-type-scale: body2,\n $dismiss-icon-size: 18px,\n $dismiss-button-size: 36px, // New in 9.31.0\n $min-width: 344px,\n $max-width: 672px,\n $mobile-breakpoint: 480px,\n $viewport-margin-narrow: 8px,\n $viewport-margin-wide: 24px,\n $padding: 8px,\n\n $elevation: 6,\n $shape-radius: small, // Key from shape.$category-keywords or CSS length value (e.g., 4px)\n $z-index: 8, // One above `<ui-dialog>`\n\n // These variables need to be kept in sync with the values in constants.js.\n $enter-duration: 150ms,\n $exit-duration: 75ms\n);\n@use '@material/circular-progress' with (\n $color: primary,\n $track-color: transparent,\n\n /// The rotation position of the arcs that corresponds to their fully contracted state\n $base-angle: 135deg,\n /// Amount of circle the arc takes up\n $arc-size: 270deg,\n /// Time it takes to expand and contract arc\n $arc-time: 1333ms,\n /// Time for inactive indicator to disappear\n $shrink-time: 400ms,\n /// How much the start location of the arc should rotate each time; 216 gives\n /// us a 5 pointed star shape (it's 360/5 * 3)\n $arc-start-rotation-interval: 216deg,\n /// The timing function used for the core spinner animations.\n $timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n);\n@use 'balm-ui/components/spinner' with (\n $fourColors: $blue $red $yellow $green\n);\n<ui-switch> sass variables is deprecated in balm-ui >= 9.37.0\u26a0\ufe0f The
deprecatedpath is required inbalm-ui>= 9.34.0
@use '@material/switch/deprecated/variables' with (\n $track-width: 36px,\n $track-height: 14px,\n $thumb-diameter: 20px,\n $ripple-size: 48px,\n\n $minimum-size: 28px,\n $maximum-size: $ripple-size,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n size: (\n minimum: $minimum-size,\n default: $maximum-size,\n maximum: $maximum-size,\n ),\n ),\n\n $thumb-active-margin: $track-width - $thumb-diameter,\n\n $toggled-off-thumb-color: surface,\n $toggled-off-track-color: on-surface,\n $toggled-off-ripple-color: #9e9e9e,\n $disabled-thumb-color: surface,\n $disabled-track-color: on-surface,\n\n $baseline-theme-color: secondary\n);\n@use '@material/data-table' with (\n $fill-color: surface,\n $header-row-fill-color: surface,\n $row-fill-color: inherit,\n $selected-row-fill-color: rgba(theme-color.prop-value(primary), 0.04),\n $checked-icon-color: primary,\n $divider-color: rgba(theme-color.prop-value(on-surface), 0.12),\n $divider-size: 1px,\n $row-hover-fill-color: rgba(theme-color.prop-value(on-surface), 0.04),\n\n $header-row-text-color: rgba(theme-color.prop-value(on-surface), 0.87),\n $row-text-color: rgba(theme-color.prop-value(on-surface), 0.87),\n\n $sort-icon-color: rgba(theme-color.prop-value(on-surface), 0.6),\n $sort-icon-active-color: rgba(\n theme-color.prop-value(on-surface),\n 0.87\n ),\n $sort-icon-density-scale: -5,\n\n $shape-radius: medium,\n $stroke-size: 1px,\n $stroke-color: rgba(theme-color.prop-value(on-surface), 0.12),\n\n $row-height: 52px,\n $header-row-height: get-header-row-height($row-height),\n $cell-leading-padding: 16px,\n $cell-trailing-padding: 16px,\n\n $minimum-row-height: 36px,\n $maximum-row-height: $row-height,\n $default-density-scale: density-variables.$default-scale\n);\n'},22457:function(t,e,o){"use strict";o.r(e);e.default='New in 9.32.0
- Rename variables
$cell-height->$row-height$header-cell-height->$header-row-height$minimum-cell-height->$minimum-row-height$maximum-cell-height->$maximum-row-height
<ui-tab>@use '@material/tab' as tab-variables with (\n $icon-size: 24px,\n $height: 48px,\n $stacked-height: 72px,\n $min-width: 90px,\n $horizontal-padding: 24px,\n $text-label-opacity: 0.6,\n $icon-opacity: 0.54,\n $text-label-color-default: rgba(\n theme-color.prop-value(on-surface),\n $text-label-opacity\n ),\n $icon-color-default: rgba(\n theme-color.prop-value(on-surface),\n $icon-opacity\n ),\n $text-label-color-active: primary,\n $icon-color-active: primary\n);\n<ui-tab-scroller>@use '@material/tab-scroller' with (\n $transition-duration: 250ms\n);\n<ui-tab-bar>@use '@material/tab-bar' with (\n $height: tab-variables.$height,\n $minimum-height: 30px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n $stacked-height: tab-variables.$stacked-height,\n $stacked-minimum-height: 56px,\n $stacked-maximum-height: $stacked-height,\n $stacked-density-scale: density-variables.$default-scale,\n $stacked-density-config: (\n height: (\n default: $stacked-height,\n maximum: $stacked-maximum-height,\n minimum: $stacked-minimum-height,\n ),\n )\n);\n<ui-textfield-icon>@use '@material/textfield/icon' with (\n $icon-size: 24px,\n $dense-icon-size: 20px,\n $touch-target-size: 48px,\n\n $leading-icon-padding-left: 16px,\n $leading-icon-padding-right: 8px,\n $trailing-icon-padding-left: 12px,\n $trailing-icon-padding-right: 12px\n);\n<ui-textfield>@use '@material/textfield' with (\n $error: error,\n $disabled-border: rgba(theme-color.prop-value(on-surface), 0.06),\n $disabled-icon: rgba(theme-color.prop-value(on-surface), 0.3),\n $bottom-line-hover: rgba(theme-color.prop-value(on-surface), 0.87),\n $bottom-line-idle: rgba(theme-color.prop-value(on-surface), 0.42),\n $label: rgba(theme-color.prop-value(on-surface), 0.6),\n\n $ink-color: rgba(theme-color.prop-value(on-surface), 0.87),\n $helper-text-color: rgba(theme-color.prop-value(on-surface), 0.6),\n $icon-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $focused-label-color: rgba(theme-color.prop-value(primary), 0.87),\n $placeholder-ink-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $affix-color: rgba(theme-color.prop-value(on-surface), 0.6),\n\n $disabled-label-color: rgba(theme-color.prop-value(on-surface), 0.38),\n $disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38),\n $disabled-placeholder-ink-color: rgba(\n theme-color.prop-value(on-surface),\n 0.38\n ),\n $disabled-helper-text-color: rgba(\n theme-color.prop-value(on-surface),\n 0.38\n ),\n $disabled-affix-color: rgba(theme-color.prop-value(on-surface), 0.38),\n\n $background: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 4%\n ),\n $disabled-background: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 2%\n ),\n $secondary-text: rgba(theme-color.prop-value(on-surface), 0.6),\n\n $outlined-idle-border: rgba(theme-color.prop-value(on-surface), 0.38),\n $outlined-disabled-border: rgba(\n theme-color.prop-value(on-surface),\n 0.06\n ),\n $outlined-hover-border: rgba(theme-color.prop-value(on-surface), 0.87),\n\n $textarea-border: rgba(theme-color.prop-value(on-surface), 0.73),\n $textarea-background: rgba(theme-color.prop-value(surface), 1),\n $textarea-disabled-border-color: rgba(\n theme-color.prop-value(on-surface),\n 0.26\n ),\n // cannot be transparent because multiline textarea input\n // will make text unreadable\n $textarea-disabled-background: rgba(249, 249, 249, 1),\n\n $outlined-stroke-width: 2px,\n $height: 56px,\n $minimum-height: 40px,\n $minimum-height-for-filled-label: 52px,\n $maximum-height: $height,\n $padding-horizontal: 16px,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n $shape-radius: small,\n $label-position-y: floating-label-variables.$position-y,\n $label-offset: 16px,\n $outlined-with-leading-icon-label-position-x: 32px,\n $textarea-outlined-label-position-y: 24.75px, // visually ~4dp from top to baseline\n $textarea-filled-label-position-y: 10.25px, // visually ~20dp from top to label baseline\n $helper-line-padding: 16px,\n $filled-baseline-top: 40px,\n $input-height: 28px,\n $textarea-label-top: 19px, // visually ~32dp from top to label baseline\n $textarea-outlined-label-top: $textarea-label-top -\n notched-outline-variables.$border-width,\n $textarea-line-height: 1.5rem, // 24dp from baseline to baseline\n $textarea-input-handle-margin: 1px,\n // Outlined textarea's first line should be placed at the same position as\n // outlined textfield, and should look identical if it is 1 row. Since textfield\n // is centered and font metrics vary for where the baseline is, the best way to\n // ensure textarea and textfield align is with padding. At 56px height with a\n // 24px line-height, a centered textfield has 16px of top and bottom padding.\n // Textarea should use this to position itself.\n $textarea-outlined-input-margin-top: 16px,\n $textarea-outlined-input-margin-bottom: 16px,\n $textarea-outlined-density-config: (\n margin-top: (\n default: $textarea-outlined-input-margin-top,\n maximum: $textarea-outlined-input-margin-top,\n minimum: $textarea-outlined-input-margin-top - 8,\n ),\n margin-bottom: (\n default: $textarea-outlined-input-margin-bottom,\n maximum: $textarea-outlined-input-margin-bottom,\n minimum: $textarea-outlined-input-margin-bottom - 8,\n ),\n ), // remove 1/2 of scale to -4 for minimum\n $textarea-outlined-label-density-config: (\n top: (\n default: $textarea-outlined-label-top,\n maximum: $textarea-outlined-label-top,\n minimum: $textarea-outlined-label-top - 8,\n ),\n ), // remove 1/2 of scale to -4 for minimum\n $textarea-filled-input-margin-top: 23px, // visually ~40dp from top to baseline\n $textarea-filled-input-margin-bottom: 9px, // visually ~16dp from baseline to bottom\n $textarea-filled-density-config: (\n margin-bottom: (\n default: $textarea-filled-input-margin-bottom,\n maximum: $textarea-filled-input-margin-bottom,\n minimum: $textarea-filled-input-margin-bottom - 4,\n ),\n ), // scale to -1 for minimum\n $textarea-filled-label-density-config: (\n top: (\n default: $textarea-label-top,\n maximum: $textarea-label-top,\n minimum: $textarea-label-top - 2,\n ),\n ), // remove 1/2 of scale to -1 for minimm\n $textarea-filled-no-label-input-margin-top: 16px, // see above explanation for outlined textarea margin\n $textarea-filled-no-label-input-margin-bottom: 16px, // see above explanation for outlined textarea margin\n $textarea-filled-no-label-density-config: (\n margin-top: (\n default: $textarea-filled-no-label-input-margin-top,\n maximum: $textarea-filled-no-label-input-margin-top,\n minimum: $textarea-filled-no-label-input-margin-top - 8,\n ),\n margin-bottom: (\n default: $textarea-filled-no-label-input-margin-bottom,\n maximum: $textarea-filled-no-label-input-margin-bottom,\n minimum: $textarea-filled-no-label-input-margin-bottom - 8,\n ),\n ), // remove 1/2 of scale to -4 for minimum\n $textarea-internal-counter-input-margin-bottom: 2px, // visually ~20dp from baseline to counter baseline\n $textarea-internal-counter-baseline-bottom: 16px,\n // Note that the scale factor is an eyeballed approximation of what's shown in the mocks.\n\n $prefix-padding: 2px,\n $prefix-end-aligned-padding: 12px,\n $suffix-padding: 12px,\n $suffix-end-aligned-padding: 2px\n);\n@use '@material/theme/theme-color' with (\n $primary: #6200ee, // baseline purple, 500 tone\n $on-primary: if(contrast-tone($primary) == 'dark', #000, #fff),\n\n $secondary: #018786, // baseline teal, 600 tone\n $on-secondary: if(contrast-tone($secondary) == 'dark', #000, #fff),\n $background: #fff, // White\n\n $surface: #fff,\n $on-surface: if(contrast-tone($surface) == 'dark', #000, #fff),\n\n $error: #b00020,\n $on-error: if(contrast-tone($error) == 'dark', #000, #fff),\n\n $text-colors: (\n dark: (\n primary: rgba(black, 0.87),\n secondary: rgba(black, 0.54),\n hint: rgba(black, 0.38),\n disabled: rgba(black, 0.38),\n icon: rgba(black, 0.38),\n ),\n light: (\n primary: white,\n secondary: rgba(white, 0.7),\n hint: rgba(white, 0.5),\n disabled: rgba(white, 0.5),\n icon: rgba(white, 0.5),\n ),\n ),\n\n $text-emphasis: (\n high: 0.87,\n medium: 0.6,\n disabled: 0.38,\n )\n);\nMaterial Color System Usage (See below color palette)
@use '@material/theme' as color;\n\n.test {\n color: color.$red-800;\n}\n@use '@material/top-app-bar' with (\n // Default styles\n $row-height: 64px,\n $title-left-padding: 20px,\n $section-vertical-padding: 8px,\n $section-horizontal-padding: 12px,\n\n $mobile-breakpoint: 599px,\n\n // Default mobile styles\n $mobile-row-height: 56px,\n $mobile-section-padding: 4px,\n\n // Short top app bar\n $short-collapsed-border-radius: 4px,\n $short-collapsed-width: 56px,\n $short-collapsed-right-icon-padding: 12px,\n\n // Prominent styles\n $prominent-row-height: 128px,\n $prominent-title-bottom-padding: 2px,\n\n // Prominent mobile styles\n $prominent-mobile-title-bottom-padding: 6px,\n\n // Dense styles\n $dense-row-height: 48px,\n $dense-section-horizontal-padding: 4px,\n $dense-title-left-padding: 12px,\n\n // Dense & Prominent styles\n $dense-prominent-title-bottom-padding: 9px\n);\n@use 'balm-ui/components/tree' with (\n $node-hover-color: rgba(theme-color.prop-value(on-surface), 0.04),\n\n $indent-width: 24px,\n $icon-width: 24px,\n $label-padding: 8px 0,\n\n $selected-background-color: rgba(\n theme-color.prop-value(primary),\n 0.12\n ),\n $selected-color: theme-color.prop-value(on-surface)\n);\n@use '@material/typography/typography' with (\n $font-family: string.unquote('Roboto, sans-serif'),\n\n // Override styles\n $styles-headline1: (),\n $styles-headline2: (),\n $styles-headline3: (),\n $styles-headline4: (),\n $styles-headline5: (),\n $styles-headline6: (),\n $styles-subtitle1: (),\n $styles-subtitle2: (),\n $styles-body1: (),\n $styles-body2: (),\n $styles-caption: (),\n $styles-button: (),\n $styles-overline: ()\n);\nfont-sizeline-heightfont-weightletter-spacingtext-decorationtext-transform$alert(message)
$alert(options)
interface VueInstance {\n $alert(options: string | object): Promise<void>;\n}\n| Option | Type | Default | Description |
|---|---|---|---|
className | string | '' | The custom class name for the alert dialog. |
title | string | '' | The title of the alert dialog. |
state | string | '' | State type. |
stateOutlined | boolean | false | Show outlined state. |
message | string | '' | The content to be displayed in the alert dialog. |
raw | boolean | false | Rendered plain HTML. |
buttonText | string | 'OK' | Alert button content. |
callback | function | false | Handle some event when the alert button is clicked. |
interface AlertDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\nUsage 1
$alert({\n message,\n callback() {\n // ...\n }\n});\nUsage 2 (Recommended)
$alert(message).then(() => {\n // ...\n});\n$alert without .vue componentimport { useAlert } from 'balm-ui';\n// OR\n// import { useAlert } from 'balm-ui/plugins/alert';\n\nconst $alert = useAlert();\n$alert('Hello BalmUI');\n<ui-alert><!-- message --></ui-alert>\n| Name | Type | Default | Description |
|---|---|---|---|
state | string | '' | State type. |
stateOutlined | boolean | false | Show outlined state. |
closable | boolean | false | Whether alert can be closed. |
interface Alert {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the message content and can contain HTML. |
Alerts provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
'},61904:function(t,e,o){"use strict";o.r(e);e.default='<div v-anchor></div>\nv-anchor.bodyElement: custom html contianer (Default contianer is <html>)v-anchor.html: for html (e.g. markdown)v-anchor.offset="offsetValue": set offset for scrollTop (Use data-vanchor-offset in <html> or custom contianer)offsetValue is a number
<html data-vanchor-offset="64">\n <!-- Anchors & Targets -->\n</html>\n\n<!-- OR -->\n\n<div class="container" v-anchor.offset="64">\n <!-- Anchors & Targets -->\n</div>\nv-anchor:hrefv-anchor:id<div v-anchor:href="'#target1'">Anchor 1</div>\n<div v-anchor:href="'#target2'">Anchor 2</div>\n\n<div v-anchor:id="'target1'">Target 1</div>\n<div v-anchor:id="'target2'">Target 2</div>\nclass="v-anchor" data-href="selector"id or unique class attribute<div v-anchor.html>\n <div class="v-anchor" data-href="#target1">Anchor 1</div>\n <div class="v-anchor" data-href="#target2">Anchor 2</div>\n\n <div id="target1">Target 3</div>\n <div id="target2">Target 4</div>\n</div>\n<ui-autocomplete></ui-autocomplete>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
outlined | boolean | false | Styles the autocomplete as an outlined text field. (label or placeholder required) | |
modelValue (v-model) | string, number | '' | Mandatory. | |
source | array | [] | Defines the data to use, must be specified. | |
sourceFormat | object | { label: 'label', value: 'value' } | Defines the data source format. | 9.3.0 |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label>. | |
label | string | '' | A text caption or description for the autocomplete, which use the input's placeholder attribute instead. | |
placeholder | string | null | The placeholder attribute of the <input>. | |
disabled | boolean | false | Styles the autocomplete as a disabled text field. | |
required | boolean | false | Styles the autocomplete as a required text field. | |
autofocus | boolean | false | If set to true the first item will automatically be focused when the menu is shown. | |
delay | number | 300 | The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive. | |
minlength | number | 1 | The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items. | |
remote | boolean | false | Get data by AJAX. Default usage for local data. | |
highlight | boolean | false | Styles the autocomplete suggestion value as a strong text. | 9.3.0 |
filterKeywords | boolean | false | Enables the filter keywords suggestion. | 10.11.0 |
fullwidth | boolean | false | Styles the autocomplete as a full width text field. | |
endAligned | boolean | false | Styles the autocomplete with an end-aligned input. | |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. (No need to configure withLeadingIcon) | |
withLeadingIcon | boolean, string | false | Styles the autocomplete as a text field with a leading icon. (Use with before slot) | |
withTrailingIcon | boolean, string | false | Styles the autocomplete as a text field with a trailing icon. (Use with after slot) | |
inside | boolean | false | Styles for the overflow inside component (e.g. in <ui-dialog>) | 10.10.0 |
source prop. There are two supported formats:[ 'Choice1', 'Choice2' ]label and value key): [ { label: 'Choice1', value: 'value1' }, ... ]You can customize your properties by
sourceFormatprop
| Name | Props | Description |
|---|---|---|
default | The default slot holds the label for the autocomplete. | |
before | iconClass | The before slot holds a custom leading icon. |
after | iconClass | The before slot holds a custom trailing icon. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: string|number) | Emits when the autocomplete value is changed. |
search | function(keywords: string) | Emits when the autocomplete value is changed. Applicable only for the remote autocomplete. |
selected | function(item: object) | Emits when the autocomplete item is selected. |
selected event return data:
{\n label: 'Choice 1',\n value: 'value 1',\n // more custom fields\n}\nNOTE: If you are not using
v-model, you should listen for the autocomplete using@update:modelValueand update themodelValueprop.
Automatic
<ui-autocomplete v-model="value"></ui-autocomplete>\nManual
<ui-autocomplete\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-autocomplete>\n<ui-badge></ui-badge>\n| Name | Type | Default | Description |
|---|---|---|---|
count | number | 0 | Number to show in badge. |
overlap | boolean | false | Make the badge overlap with its container. |
maxCount | number | 99 | Max count to show. |
dot | boolean | false | Whether to display a dot instead of count. |
state | string | '' | State type for text badge. |
interface Badge {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the text content and can contain HTML. | |
badge | The badge slot holds the custom badge content. |
Small status descriptors for UI components.
'},90134:function(t,e,o){"use strict";o.r(e);e.default='<div v-badge></div>\nv-badge="count"v-badge.overlap="count"v-badge.dot| Value | Type | Default | Description |
|---|---|---|---|
count | number | 0 | Number to show in badge. |
'},49731:function(t,e,o){"use strict";o.r(e);e.default='maximum count:
99
<ui-banner><!-- the banner message --></ui-banner>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | boolean | false | Mandatory. | |
centered | boolean | false | Displayed centered. By default, banners are positioned as leading. | 9.20.0 |
fixed | boolean | false | When used below top app bars, banners should remain fixed at the top of the screen. | 9.20.0 |
withImage | boolean | false | Images can help communicate a banner\u2019s message. | 9.20.0 |
mobileStacked | boolean | false | On mobile view, banners with long text should have their action(s) be positioned below the text instead of alongside it. | 9.20.0 |
primaryButtonText | boolean | 'OK' | The primary action text. | |
secondaryButtonText | boolean | '' | The secondary action text. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the message text for the banner. | |
image | The icon slot holds the icon or image for the banner. | |
actions | The custom action buttons. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | Emits when the banner is hidden. |
closed | function(reason: string) | Emits when the banner is closed. |
NOTE: If you are not using
v-model, you should listen for the banner using@update:modelValueand update themodelValueprop.
Automatic
<ui-banner v-model="open"></ui-banner>\nManual
<ui-banner\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-banner>\nA banner displays a prominent message and related optional actions.
'},67082:function(t,e,o){"use strict";o.r(e);e.default='<ui-bottom-sheet></ui-bottom-sheet>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean | false | Mandatory. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the content for the bottom sheet. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | Emits when the bottom sheet is hidden. |
NOTE: If you are not using
v-model, you should listen for the bottom sheet using@update:modelValueand update themodelValueprop.
Automatic
<ui-bottom-sheet v-model="open"></ui-bottom-sheet>\nManual
<ui-bottom-sheet\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-bottom-sheet>\n'},68248:function(t,e,o){"use strict";o.r(e);e.default='New in 9.25.0
<ui-button><!-- the button text label --></ui-button>\n| Name | Type | Default | Description |
|---|---|---|---|
type | string | 'text' | Mandatory. Button types. |
outlined | boolean | false | Optional. Styles an outlined button that is flush with the surface. |
raised | boolean | false | Optional. Styles a contained button that is elevated above the surface. |
unelevated | boolean | false | Optional. Styles a contained button that is flush with the surface. |
icon | string | '' | Optional. Indicates an icon element. See Material Icons list. |
disabled | boolean | false | The <button> native attribute. To disable a button. |
nativeType | string | 'button' | The <button> native attribute. |
interface UiButton {\n type?: 'text' | 'outlined' | 'raised' | 'unelevated';\n nativeType?: 'button' | 'submit' | 'reset';\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the button or link text and can contain HTML. | |
before | iconClass | Custom leading icon |
after | iconClass | Custom trailing icon |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n| Name | Type | Description |
|---|---|---|
click | function(event: object) | Emits when the button is clicked. |
Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
'},92365:function(t,e,o){"use strict";o.r(e);e.default='New in 9.22.0
<a v-button></a>\nv-buttonv-button.outlinedv-button.raisedv-button.unelevated<ui-card-actions><!-- card actions area --></ui-card-actions>\n| Name | Type | Default | Description |
|---|---|---|---|
fullBleed | boolean | false | Removes the action area's padding and causes its only child (a mdc-card__action element) to consume 100% of the action area's width |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the card actions parent components. |
Child components:
<ui-card-buttons><ui-card-icons><ui-card-buttons><!-- the button components --></ui-card-buttons>\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the button components and can contain HTML. |
<ui-card-content>\n <!-- content within actionable area: rich media + additional text content -->\n</ui-card-content>\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the card content and can contain HTML. |
Child components:
<ui-card-media><ui-card-text><ui-card-icons><!-- the icon button components --></ui-card-icons>\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the icon components and can contain HTML. |
<ui-card-media-content><!-- rich media content --></ui-card-media-content>\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the card media content and can contain HTML. |
<ui-card-media>\n <!-- <ui-card-media-content> -->\n</ui-card-media>\n| Name | Type | Default | Description |
|---|---|---|---|
square | boolean | false | Optional. Automatically scales the media area's height to equal its width. |
rectangle | boolean | false | Optional. Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the card media content component and can contain HTML. |
Child components:
<ui-card-media-content><ui-card-text><!-- additional text content --></ui-card-text>\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the card text content and can contain HTML. |
<ui-card><!-- Card contents --></ui-card>\n| Name | Type | Default | Description |
|---|---|---|---|
outlined | boolean | false | Removes the shadow and displays a hairline outline instead |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the card child components and can contain HTML. |
Child components:
<ui-card-content><ui-card-actions>Cards contain content and actions that relate information about a subject.
'},15640:function(t,e,o){"use strict";o.r(e);e.default='<ui-card>\n <ui-card-content>\n <ui-card-media>\n <ui-card-media-content></ui-card-media-content>\n </ui-card-media>\n <ui-card-text></ui-card-text>\n </ui-card-content>\n <ui-card-actions>\n <ui-card-buttons></ui-card-buttons>\n <ui-card-icons></ui-card-icons>\n </ui-card-actions>\n</ui-card>\n| Component | Description |
|---|---|
<ui-card> | Mandatory. The main card element. |
<ui-card-content> | Optional. The main tappable area of the card. Typically contains most (or all) card content except <ui-card-actions>. Only applicable to cards that have a primary action that the main surface should trigger. |
<ui-card-media> | Optional. Media area that displays a custom background-image with background-size: cover. |
<ui-card-media-content> | Optional. An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the background-image. |
<ui-card-text> | Optional. Additional text content. |
<ui-card-actions> | Optional. Row containing action buttons and/or icons. |
<ui-card-buttons> | Optional. A group of action buttons, displayed on the left side of the card (in LTR), adjacent to <ui-card-icons>. |
<ui-card-icons> | Optional. A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to <ui-card-buttons>. |
<ui-form-field>\n <ui-checkbox></ui-checkbox>\n <label>Checkbox</label>\n</ui-form-field>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean, array | false | Mandatory. |
indeterminate | boolean | false | Styles the checkbox as an indeterminate checkbox. |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label>. |
value | string, number | '' | The value attribute of the <input>. |
disabled | boolean | false | Styles the checkbox as a disabled checkbox. |
attrs | object | {} | Other attributes for <input>. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: boolean|array) | Emits when the checkbox is changed. |
NOTE: If you are not using
v-model, you should listen for the checkbox using@update:modelValueand update themodelValueprop.
Automatic
<ui-checkbox v-model="value"></ui-checkbox>\nManual
<ui-checkbox\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-checkbox>\nCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.
'},47431:function(t,e,o){"use strict";o.r(e);e.default='<ui-chip><!-- the chip text --></ui-chip>\n| Name | Type | Default | Description |
|---|---|---|---|
icon | string | '' | Optional. Indicates an leading icon element. See Material Icons list. |
selected | boolean | false | Optional. Hides the leading icon in a filter chip when the chip is selected. |
deletable | boolean | false | Optional. Indicates a trailing icon which removes the chip from the DOM. Only use with input and filter chips. |
NOTE: The
removableprop rename todeletablein 10.1.0, and add support for filter chips
| Name | Props | Description |
|---|---|---|
default | The default slot holds the chip child components. | |
before | iconClass | Custom leading icon in the chip. |
after | iconClass | Custom trailing icon in the input chips. |
<ui-chips>\n <ui-chip></ui-chip>\n <!-- more chip -->\n</ui-chips>\n<ui-chips> Types
0: 'action'1: 'input'2: 'choice'3: 'filter'| Name | Type | Default | Description | Version |
|---|---|---|---|---|
type | string, number | 0 | Mandatory. Chips types. | |
modelValue (v-model) | string, number, array | '' | Mandatory. Single or multiple selection from a set of options. | |
options | array | [] | An array of options to show to the user. Applicable only for choice or filter chips. | |
optionFormat | object | { label: 'label', value: 'value' } | Defines the option data format. | 9.34.0 |
items | array | [] | A set of chips. Applicable only for updating the input chips. |
\u26a0\ufe0f The prop
optionLabelandoptionValueis deprecated, useoptionFormatinstead in9.34.0. \u26a0\ufe0f The propchipsis deprecated, useitemsinstead in10.0.0.
| Name | Props | Description |
|---|---|---|
default | The default slot holds the chip components and can contain HTML. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(selectedIndex: number|array) | Emits when the chips is changed. |
NOTE: If you are not using
v-model, you should listen for the chips using@update:modelValueand update themodelValueprop.
Automatic
<ui-chips v-model="selectedIndex"></ui-chips>\nManual
<ui-chips\n :model-value="selectedIndex"\n @update:model-value="balmUI.onChange('selectedIndex', $event)"\n></ui-chips>\nChips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.
'},29474:function(t,e,o){"use strict";o.r(e);e.default='<ui-collapse></ui-collapse>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | boolean | false | Default expanded state. | |
withIcon | boolean | false | Default icons. | |
iconEndAligned | boolean | false | Styles icon end aligned. | 9.29.0 |
ripple | boolean, number | false | Sets the ripple color. |
ripple value:true: default color1: primary color2: secondary color| Name | Props | Description |
|---|---|---|
default | The default slot holds the collapse content and can contain HTML. | |
expand-more-icon | Custom expand more icon. | |
expand-less-icon | Custom expand less icon. |
A content area which can be collapsed and expanded.
'},73197:function(t,e,o){"use strict";o.r(e);e.default='$confirm(message)
$confirm(options)
interface VueInstance {\n $confirm(options: string | object): Promise<boolean>;\n}\n| Option | Type | Default | Description |
|---|---|---|---|
className | string | '' | The custom class name for the confirm dialog. |
title | string | '' | The title of the confirm dialog. |
state | string | '' | State type. |
stateOutlined | boolean | false | Show outlined state. |
message | string | '' | The content to be displayed in the confirm dialog. |
raw | boolean | false | Rendered plain HTML. |
acceptText | string | 'OK' | Accept button content. |
cancelText | string | 'Cancel' | Cancel button content. |
callback | function | false | Handle some event when the confirm button is clicked. |
interface ConfirmDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\nUsage 1
$confirm({\n message,\n callback(result) {\n // ...\n }\n});\nUsage 2 (Recommended)
$confirm(message).then((result) => {\n // ...\n});\n
resultis a boolean value indicating whether OK or Cancel was selected (truemeans OK).
$confirm without .vue componentimport { useConfirm } from 'balm-ui';\n// OR\n// import { useConfirm } from 'balm-ui/plugins/confirm';\n\nconst $confirm = useConfirm();\n$confirm('Hello BalmUI');\n'},64463:function(t,e,o){"use strict";o.r(e);e.default='New in 9.21.0
<div v-copy></div>\ninterface Copy {\n text: string;\n success: Function;\n error?: Function;\n}\n<ui-datepicker></ui-datepicker>\n<ui-datepicker> type in config.mode prop
| Name | Type | Default | Description |
|---|---|---|---|
outlined | boolean | false | Styles the datepicker as an outlined text field. (label or placeholder required) |
modelValue (v-model) | string, number, array | '' | Mandatory. |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label>. |
label | string | '' | A text caption or description for the datepicker, which use the input's placeholder attribute instead. |
placeholder | string | null | The placeholder attribute of the <input>. |
disabled | boolean | false | Styles the datepicker as a disabled text field. |
required | boolean | false | Styles the datepicker as a required text field. |
fullwidth | boolean | false | Styles the datepicker as a full width text field. |
endAligned | boolean | false | Styles the datepicker with an end-aligned input. |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. (No need to configure withLeadingIcon) |
withLeadingIcon | boolean, string | false | Styles the datepicker as a text field with a leading icon. (Use with before slot) |
withTrailingIcon | boolean, string | false | Styles the datepicker as a text field with a trailing icon. (Use with after slot) |
config | object | {} | See Flatpickr configuration. |
toggle | boolean | false | Show calendar icon button. |
clear | boolean | false | Show clear icon button. |
monthOptions | object | {} | See Flatpickr month select options. |
<ui-datepicker :config="config"></ui-datepicker>\nimport lang from 'flatpickr/dist/l10n/zh.js';\n\nexport default {\n data() {\n return {\n config: {\n locale: lang.zh\n }\n };\n }\n};\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the label for the datepicker. | |
before | iconClass | The before slot holds a custom leading icon. |
after | iconClass | The before slot holds a custom trailing icon. (When withTrailingIcon = true) |
toggle | The custom toggle icon button. (When withTrailingIcon = false) | |
clear | The custom clear icon button. (When withTrailingIcon = false) |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: string|array) | Emits when the datepicker value is changed. |
NOTE: If you are not using
v-model, you should listen for the datepicker using@update:modelValueand update themodelValueprop.
Automatic
<ui-datepicker v-model="value"></ui-datepicker>\nManual
<ui-datepicker\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-datepicker>\nDate pickers let users select a date, or a range of dates.
'},95578:function(t,e,o){"use strict";o.r(e);e.default=''},50987:function(t,e,o){"use strict";o.r(e);e.default='New in 9.21.0
<div v-debounce></div>\ninterface Debounce {\n callback: Function;\n delay?: number; // defaults: 250 ms\n}\n<ui-dialog-actions><!-- the dialog actions --></ui-dialog-actions>\n| Name | Type | Default | Description |
|---|---|---|---|
acceptText | string | 'OK' | The accept button text. |
cancelText | string | 'Cancel' | The cancel button text. |
| Name | Props | Description |
|---|---|---|
default | buttonClass | The default slot holds the dialog actions and can contain HTML. |
<template #default="{ buttonClass }">\n <ui-button :class="buttonClass">BUTTON</ui-button>\n</template>\nOther customizations
data-mdc-dialog-button-default: Optional. Add to a button to indicate that it is the default action button.data-mdc-dialog-initial-focus: Optional. Add to an element to indicate that it is the element to initially focus on after the dialog has opened.<ui-dialog-content><!-- the dialog content --></ui-dialog-content>\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the dialog content and can contain HTML. |
<ui-dialog-title><!-- the dialog title --></ui-dialog-title>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
closable | boolean | false | Displays close icon button. | 9.3.0 |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the dialog title and can contain HTML. |
<ui-dialog><!-- the dialog child components --></ui-dialog>\nNOTE:
<ui-dialog>must be including a<ui-button>or<ui-icon-button>for actions.
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | boolean | false | Mandatory. | |
escapeKey | boolean | true | Sets the action reflected when the Escape key is pressed. Setting to false disables closing the dialog via Escape key. | 9.13.0 |
closable | boolean | true | Closes the dialog, when a user actions on the accept or cancel button. | |
maskClosable | boolean | false | Closes the dialog, when the dialog scrim is clicked. | |
noScrim | boolean | false | Hides the dialog scrim. | |
resetScroll | boolean | false | Reset scroll bar, when the dialog is closed. | |
fullscreen | boolean | false | Styles a full-screen dialog. | 9.14.0 |
sheet | boolean | false | Styles a floating sheet dialog. | 10.5.0 |
noContentPadding | boolean | false | Styles a no default padding dialog content. | 10.5.0 |
NOTE: The
noBackdropprop rename tonoScrimin 9.25.0
NOTE: Full-screen dialogs are intended for mobile/small-screen devices. The dialog's size will adapt to the screen size, and so becomes modal if used on larger screen sizes.
| Name | Props | Description |
|---|---|---|
default | The default slot holds the dialog child components. |
Child components:
<ui-dialog-title><ui-dialog-content><ui-dialog-actions>| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | Emits when the dialog is changed. |
close | function() | Emits when the dialog is closed. |
confirm | function(result: boolean) | Emits when the action buttons is clicked. |
accept | function() | Emits when the accept button is clicked. |
cancel | function() | Emits when the cancel button is clicked. |
NOTE: If you are not using
v-model, you should listen for the dialog using@update:modelValueand update themodelValueprop.
Automatic
<ui-dialog v-model="open"></ui-dialog>\nManual
<ui-dialog\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-dialog>\nDialogs provide important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task.
'},56306:function(t,e,o){"use strict";o.r(e);e.default='<ui-dialog>\n <ui-dialog-title></ui-dialog-title>\n <ui-dialog-content></ui-dialog-content>\n <ui-dialog-actions></ui-dialog-actions>\n</ui-dialog>\n| Component | Description |
|---|---|
<ui-dialog> | Mandatory. The root DOM element containing the surface and the container. |
<ui-dialog-title> | Optional. Brief summary of the dialog's purpose. |
<ui-dialog-content> | Optional. Primary content area. May contain a list, a form, or prose. |
<ui-dialog-actions> | Optional. Footer area containing the dialog's action buttons. |
<ui-divider></ui-divider>\n<ui-divider> Types
0: 'horizontal'1: 'vertical'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | Mandatory. Text divider types. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the divider text and can contain HTML. | |
left | Applicable only for the vertical text divider. | |
right | Applicable only for the vertical text divider. |
A divider is a thin line that groups content in lists and layouts.
'},23144:function(t,e,o){"use strict";o.r(e);e.default='<ui-drawer type="dismissible"></ui-drawer>\n<ui-drawer-app-content><!-- Content --></ui-drawer-app-content>\n'},85480:function(t,e,o){"use strict";o.r(e);e.default='
<ui-drawer type="dismissible">only
\u26a0\ufe0f NOTE:
<ui-drawer-backdrop>is deprecated in 9.25.0, just use<ui-drawer type="modal">.
For balm-ui < 9.25.0
<ui-drawer type="modal"></ui-drawer>\n<ui-drawer-backdrop></ui-drawer-backdrop>\n<div><!-- Content --></div>\n<ui-drawer-content><!-- the list of items --></ui-drawer-content>\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the list of items (router link list) and can contain HTML. |
<ui-drawer-header><!-- the drawer header child components --></ui-drawer-header>\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the drawer header child components and can contain HTML. |
Child components:
<ui-drawer-title><ui-drawer-subtitle><ui-drawer><!-- the drawer child components --></ui-drawer>\n<ui-drawer> Types
0: 'permanent'1: 'dismissible'2: 'modal'NOTE:
<ui-drawer> (type="permanent") has not props and events.<ui-drawer type="dismissible"> and <ui-drawer type="modal"> must be including a <ui-nav>. And the first <ui-nav-item> needs to apply activated state in the drawer.| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | Mandatory. Drawer types. |
navId | string | null | The external menu button selector. (Please refer to the navId prop of the top app bar) |
modelValue (v-model) | boolean | false | The drawer toggle state. |
viewportHeight | boolean | false | Viewport full height(100vh) . |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the drawer child components. |
Child components:
<ui-drawer-header><ui-drawer-content>| Name | Type | Description |
|---|---|---|
nav | function(open: boolean) | Emits when the drawer is opened or closed. |
NOTE: If you are not using
v-model, you should listen for the drawer using@navand update themodelValueprop.
Automatic
<ui-drawer v-model="open" type="modal"></ui-drawer>\nManual
<ui-drawer\n :model-value="open"\n type="modal"\n @nav="balmUI.onChange('open', $event)"\n></ui-drawer>\nNavigation drawers provide access to destinations in your app.
'},51725:function(t,e,o){"use strict";o.r(e);e.default='<ui-drawer>\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item active>Activated link</ui-nav-item>\n <ui-nav-item>Unactivated link</ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n</ui-drawer>\n| Component | Description |
|---|---|
<ui-drawer> | Mandatory. |
<ui-drawer-header> | Non-scrollable element that exists at the top of the drawer. |
<ui-drawer-title> | Title text element of the drawer. |
<ui-drawer-subtitle> | Subtitle text element of the drawer. |
<ui-drawer-content> | Scrollable content area of the drawer. |
<ui-drawer-app-content> | Mandatory for <ui-drawer type="dismissible"> only. Sibling element that is resized when the drawer opens/closes. |
<ui-editor></ui-editor>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | string | '' | Mandatory. | |
options | object | {} | See Quill options. | |
toolbar | array, string | null | Custom or 'full' editor toolbar. | |
placeholder | string | null | Placeholder text to show when editor is empty. | |
readonly | boolean | false | Whether to instantiate the editor to read-only mode. | |
fullwidth | boolean | false | Styles the editor as a full width editor. | 10.3.0 |
theme | string | 'snow' | Name of theme to use. | |
toolbarIcons | object | {} | Custom toolbar icons. | |
toolbarTips | object | {} | Custom toolbar tooltips. | 9.2.0 |
toolbarOptions | object | { font: [], size: [], lineheight:[] } | Custom toolbar options of the Font Famliy, Font Size and Line Height. | |
toolbarHandlers | object | {} | Custom toolbar handlers. | |
customImageHandler | boolean | false | Enable custom image handler. | |
emotions | array | [] | The emoticon extension. Supports emoji and image. | |
withCounter | boolean | false | Styles the editor with an internal character counter. | |
extension | false, object | false | Custom extension for Quill. |
interface Editor {\n theme: 'bubble' | 'snow';\n}\ntoolbar propalign/direction/indentbackground/color/font/sizeblockquote/code-block/header/listbold/italic/link/script/strike/underlineimage/videofont/size/lineheight: custom Font Famliy, Font Size and Line Heightimage: custom image upload handleremoji: emoji moduledivider: horizontal ruletextindent: like indent, but for inlinelinkoff: remove all links in editorcounter: character counter moduleundo/redo: built-in undo/redo handlingselectall: select all content in editortoolbarOptions & emotions format for global/path/to/app/scripts/config/editor.js
const toolbarTips = {\n header: 'Headline',\n font: 'Font Famliy',\n size: 'Font Size',\n lineheight: 'Line Height',\n bold: 'Bold',\n italic: 'Italic',\n underline: 'Underline',\n color: 'Text Color',\n background: 'Background Color',\n align: {\n default: 'Left Align',\n center: 'Center Align',\n right: 'Right Align',\n justify: 'Justify Align'\n },\n list: {\n ordered: 'Ordered List',\n bullet: 'Bullet List'\n },\n indent: {\n '+1': 'Increase Indent',\n '-1': 'Decrease Indent'\n },\n blockquote: 'Blockquote',\n emoji: 'Emoji'\n};\n\nconst toolbarOptions = {\n // To customize Font Family, you need to configure the Sass variable `$font-family`\n font: [\n 'Arial',\n 'Arial Black',\n 'Comic Sans MS',\n 'Courier New',\n 'Tahoma',\n 'Georgia',\n 'Helvetica',\n 'Segoe UI',\n 'Impact',\n 'Times New Roman',\n 'Verdana'\n ],\n size: [\n '8px',\n '9px',\n '10px',\n '11px',\n '12px',\n '13px',\n '14px',\n '16px',\n '18px',\n '24px',\n '36px',\n '48px',\n '60px',\n '72px',\n '96px'\n ],\n lineheight: [\n '1',\n '1.2',\n '1.5',\n '1.6',\n '1.8',\n '2',\n '2.4',\n '2.8',\n '3',\n '4',\n '5'\n ]\n};\n\nconst emotions = [\n {\n type: 'image',\n title: 'Default',\n content: [\n {\n name: 'oo',\n alt: '\u574f\u7b11',\n src: 'https://material.balmjs.com/images/emoji/p_huaixiao.png'\n },\n {\n name: 'xx',\n alt: '\u8214\u5c4f',\n src: 'https://material.balmjs.com/images/emoji/p_tian.png'\n }\n ]\n },\n {\n type: 'emoji',\n title: 'emoji',\n content: [\n {\n name: 'smile',\n value: '\ud83d\ude00'\n },\n {\n name: 'cry',\n value: '\ud83d\ude06'\n }\n ]\n },\n {\n type: 'image',\n title: 'Custom',\n content: [\n {\n name: 'yy',\n alt: '\u795e\u517d',\n src: 'https://material.balmjs.com/images/emoji/g_shenshou.gif'\n },\n {\n name: 'zz',\n alt: '\u6d6e\u4e91',\n src: 'https://material.balmjs.com/images/emoji/g_fuyun.gif'\n }\n ]\n }\n];\n\nexport { toolbarTips, toolbarOptions, emotions };\n/path/to/app/scripts/main.js
import { toolbarTips, toolbarOptions, emotions } from '@/config/editor';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\n// `app`: Vue app\napp.use(BalmUIPlus, {\n UiEditor: {\n toolbarTips,\n toolbarOptions,\n emotions\n }\n});\ntoolbarHandlers prop{\n toolbar: ['customFormat'],\n toolbarHandlers: {\n customFormat: (quill, value) => {};\n }\n}\nquill.insert(customFormat, value) => {}: insert content into the editorquill.insert('html', content): insert html into the editor (New in 9.2.0)| Name | Props | Description |
|---|---|---|
toolbar | The toolbar slot holds the custom format buttons and can contain HTML. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(content: string) | Emits when the editor text content is changed. |
file-change | function(file: object, insert: function) | customImageHandler required. (Insert uploaded image content into the editor by insert(url) function) |
NOTE: If you are not using
v-model, you should listen for the editor using@update:modelValueand update themodelValueprop.
Automatic
<ui-editor v-model="content"></ui-editor>\nManual
<ui-editor\n :model-value="content"\n @update:model-value="balmUI.onChange('content', $event)"\n></ui-editor>\nEncode & Decode Emoji
<ui-editor ref="editor" v-model="content"></ui-editor>\n$refs.editor.useEditor(): get Quill module and a quill instance (New in 10.4.0)$refs.editor.decodeEmoji(content): get back-end data \u2192 set front-end view$refs.editor.encodeEmoji(html): submit front-end data \u2192 save back-end dataA modern WYSIWYG editor (based on Quill with built-in extension features).
'},36994:function(t,e,o){"use strict";o.r(e);e.default='Shadows provide important visual cues about objects\u2019 depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object\u2019s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 0 to 24.
<div v-shadow="4"></div>\nv-shadow="z"| Value | Type | Default | Description |
|---|---|---|---|
z | number | 0 | Sets the elevation to the (N)dp, where 1 <= N <= 24 |
v-shadow.transition="[z1, z2]"Applies the correct css rules to transition an element between elevations:
z1: default classz2: hover class\u26a0\ufe0f
<script setup>is not supported
interface BalmUIEvent {\n onChange(property: string, value: any, fn?: Function);\n\n onOpen(property: string, fn?: Function);\n onShow(property: string, fn?: Function);\n\n onClose(property: string, fn?: Function);\n onHide(property: string, fn?: Function);\n}\n| Name | Type | Default | Description |
|---|---|---|---|
property | string | '' | Update a specified Vue instance data object (data or setup) states. |
value | any | undefined | New value of a specified Vue instance data object (data or setup) states. Applicable only for balmUI.onChange. |
fn | function | noop | After method to handle. |
import { useEvent } from 'balm-ui';\n// OR\n// import { useEvent } from 'balm-ui/plugins/event';\n\nconst balmUI = useEvent();\nupdate the data object of the Vue instance to new value
balmUI.onChange(property, value);\nupdate the data object of the Vue instance to true
balmUI.onOpen(property);\nbalmUI.onShow(property);\nupdate the data object of the Vue instance to false
balmUI.onClose(property);\nbalmUI.onHide(property);\nbalmResize (better than resize)
balmScroll (better than scroll)
Composition API
import { onMounted, onBeforeUnmount } from 'vue';\n\nfunction init() {\n // ...\n}\n\nexport default {\n setup() {\n onMounted(() => {\n init();\n window.addEventListener('balmResize', init);\n });\n\n onBeforeUnmount(() => {\n window.removeEventListener('balmResize', init);\n });\n }\n};\nOptions API
export default {\n mounted() {\n this.init();\n window.addEventListener('balmResize', this.init);\n },\n beforeUnmount() {\n window.removeEventListener('balmResize', this.init);\n },\n methods: {\n init() {\n // ...\n }\n }\n};\n$bus.on(event, callback)
$bus.once(event, callback) (New in 10.9.0)
$bus.off(event, callback)
$bus.emit(eventName, ...args)
interface BalmUIEventBus {\n on(event: string | string[], callback: Function); // Listen for a custom event on the current vm.\n once(event: string, callback: Function); // Listen for a custom event, but only once.\n off(event: string | string[], callback?: Function); // Remove custom event listener(s).\n emit(eventName: string, ...args); // Trigger an event on the current instance.\n}\n\ninterface VueInstance {\n $bus: BalmUIEventBus;\n}\n| Name | Type | Default | Description |
|---|---|---|---|
event, eventName | string | Custom event name for the global communication. | |
args | any | The arguments of custom event function. | |
callback | function | Custom event function. |
$bus with .vue componentComposition API
// `/path/to/awesome.vue`\nimport { onMounted, onBeforeUnmount } from 'vue';\nimport { useBus } from 'balm-ui';\n\nexport default {\n setup() {\n const bus = useBus();\n\n onMounted(() => {\n bus.on('custom-event', (msg) => {\n console.log(msg);\n });\n });\n\n onBeforeUnmount(() => {\n bus.off('custom-event');\n });\n }\n};\nOptions API
// `/path/to/awesome.vue`\nexport default {\n mounted() {\n this.$bus.on('custom-event', (msg) => {\n console.log(msg);\n });\n },\n beforeUnmount() {\n this.$bus.off('custom-event');\n }\n};\n$bus without .vue component// `/path/to/awesome.js`\n\nimport { useBus } from 'balm-ui';\n// OR\n// import { useBus } from 'balm-ui/plugins/event';\n\nconst bus = useBus();\nbus.emit('custom-event', 'Hello BalmUI');\n<ui-fab><!-- Icon --></ui-fab>\n\n<ui-fab extended><!-- Text label --></ui-fab>\n<ui-fab> Types
0: 'regular'1: 'extended'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | Mandatory. FAB types. |
extended | boolean | false | Optional. modifies the FAB to wider size which includes a text label. |
icon | string | '' | Optional. for the icon element. See Material Icons list. |
mini | boolean | false | Optional. modifies the FAB to a smaller size. |
exited | boolean | false | Optional. animates the FAB out of view. When this class is removed, the FAB will return to view. |
| Name | Props | Description |
|---|---|---|
default | iconClass | The default slot holds the floating action button icon or text label. |
before | iconClass | Custom leading icon for the extended FAB |
after | iconClass | Custom trailing icon for the extended FAB |
NOTE: the default slot of the extended FAB has not
slot-scope.
<ui-fab>\n <template #default="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-fab>\n\n<ui-fab extended>\n <template #before="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n Text label\n</ui-fab>\n| Name | Type | Description |
|---|---|---|
click | function(event: object) | Emits when the floating action button is clicked. |
The FAB represents the most important action on a screen. It puts key actions within reach.
'},49818:function(t,e,o){"use strict";o.r(e);e.default='<ui-file></ui-file>\n| Name | Type | Default | Description |
|---|---|---|---|
inputId | string | null | The id attribute of the <input> and the for attribute of the <label>. |
accept | string | '' | File types that can be accepted. |
multiple | boolean | false | Whether to support selected multiple file. |
disabled | boolean | false | To disable a upload button. |
outlined | boolean | false | Optional. Styles an outlined upload button that is flush with the surface. |
text | string | 'Upload' | Text for the default upload button. |
preview | boolean | false | Optional. Enabled preview file data. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the file button content and can contain HTML. |
| Name | Type | Description |
|---|---|---|
change | function(files: array) | Emits when the file is changed. |
file props in files| Name | Type | Description |
|---|---|---|
tmpId | string | Temporary unique ID. |
lastModified | number | Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight). |
name | string | Returns the name of the file referenced by the File object. |
size | number | Returns the size of the file in bytes. |
type | string | Returns the MIME type of the file. |
sourceFile | file | Returns a new Blob object containing the data in the specified range of bytes of the source Blob. |
previewSrc | string | The src data for preview. Applicable only for preview status. |
previewError | number | Preview error code: {0: 'OK', 1: 'Not image type', 2: 'Unsupported'}. |
<ui-form-field>\n <label></label>\n <!-- awesome form item -->\n</ui-form-field>\n| Name | Type | Default | Description |
|---|---|---|---|
nowrap | boolean | false | Force the text to stay on a single line and ellipse the overflow text. |
alignEnd | boolean | false | Position the input after the label. |
spaceBetween | boolean | false | Align the input and label space between. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the form item and can contain HTML. |
<ui-form>\n <template #default="{ subitemClass, actionClass }">\n <ui-form-field>\n <label></label>\n <!-- awesome form item 1 -->\n <ui-form-field></ui-form-field>\n </ui-form-field>\n <ui-form-field>\n <label></label>\n <div :class="subitemClass">\n <!-- awesome form item 2 -->\n <ui-form-field></ui-form-field>\n <ui-form-field></ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field :class="actionClass">\n <ui-button></ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n<ui-form> Types
0: 'horizontal'1: 'vertical'| Name | Type | Default | Description | Version |
|---|---|---|---|---|
type | string, number | 0 | Mandatory. Form types. | |
itemMarginBottom | number | 0 | Sets the form items margin bottom. | |
nowrap | boolean | false | Force the <label> text to stay on a single line and ellipse the overflow text. | |
labelTopAligned | boolean | false | Styles the form item with a top vertical-aligned label. | |
labelRightAligned | boolean | false | Styles the form item with a right text-aligned label. | |
labelTopRightAligned | boolean | false | Styles the form item with a top vertical-aligned and right text-aligned label. | 9.9.0 |
labelWidth | number | 0 | Sets the horizontal form items' label width. | |
labelMarginRight | number | 0 | Sets the horizontal form items' label margin right. | |
labelMarginBottom | number | 0 | Sets the vertical form items' label margin bottom. | |
actionAlign | string | 'left' | Sets the form actions align. | 9.9.0 |
labelTopAligned,labelRightAlignedandlabelTopRightAlignedare applicable only forhorizontaltype form.
interface Form {\n actionAlign: 'left' | 'center' | 'right';\n}\n| Name | Props | Description |
|---|---|---|
default | itemClass, subitemClass, actionClass | The default slot holds the form items and can contain HTML. |
'},88823:function(t,e,o){"use strict";o.r(e);e.default='
itemClassandsubitemClassis new in 9.9.0
<ui-grid-cell><!-- the grid cell content --></ui-grid-cell>\n| Name | Type | Default | Description |
|---|---|---|---|
nested | boolean | false | The nested layout grid. |
columns | number, object | 4 | Optional, specifies the number of columns the cell spans. |
order | number | 0 | Optional, specifies the order of the cell. |
align | string | '' | Optional, specifies the alignment of cell. |
interface GridCell {\n columns: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n order: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n align: 'top' | 'middle' | 'bottom';\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the grid cell content and can contain HTML. |
When your contents need extra structure that cannot be supported by single layout grid, you can nest layout grid within each other. To nest layout grid, using
<ui-grid-cell nested>.
<ui-grid>\n <ui-grid-cell nested>\n <!-- Parent 1 -->\n <ui-grid-cell>Child 1</ui-grid-cell>\n <ui-grid-cell>Child 2</ui-grid-cell>\n <ui-grid-cell>Child 3</ui-grid-cell>\n </ui-grid-cell>\n <ui-grid-cell>Parent 2</ui-grid-cell>\n <ui-grid-cell>Parent 3</ui-grid-cell>\n</ui-grid>\n$grid
interface VueInstance {\n set: BalmUIGrid;\n}\ntype GridProperty = 'margin' | 'gutter' | 'column-width';\ntype GridSize = 'desktop' | 'tablet' | 'phone';\n\ninterface BalmUIGrid {\n set(property: GridProperty, size: GridSize, value: string): void;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
property | string | '' | Grid custom property. |
size | string | '' | The target platform. |
value | string | '' | Grid custom value. |
margin: the size of the grid margin.gutter: the size of the gutter between cells.column-width: the width of the column within the grid.$grid without .vue componentimport { useGrid } from 'balm-ui';\n// OR\n// import { useGrid } from 'balm-ui/plugins/grid';\n\nconst $grid = useGrid();\n<ui-grid><!-- the grid cell --></ui-grid>\n| Name | Type | Default | Description |
|---|---|---|---|
fixedColumnWidth | boolean | false | Optional, specifies the grid should have fixed column width. |
position | string | '' | Optional, specifies the alignment of the whole grid. |
interface Grid {\n position: 'left' | 'right';\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds <ui-grid-cell> and can contain HTML. |
Material design\u2019s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.
'},45782:function(t,e,o){"use strict";o.r(e);e.default='The following configuration is still the Vue scaffold built based on Balm CLI.
Edit /path/to/my-project/config/balmrc.js
module.exports = {\n styles: {\n extname: 'scss'\n },\n scripts: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n // Other Options...\n};\nEdit /path/to/my-project/app/styles/global/_vendors.scss
SASS/CSSManagement by BalmJS: the entry files of the vendors
@use '@material/theme' as theme-variables with (\n $primary: #6200ee,\n $secondary: #018786\n);\n\n@use 'balm-ui/dist/balm-ui';\nThen, you can overwrite or redefine UI styles by sass variables. (See components SASS docs)
The template standard format:
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\nIf the third-party provides sass/css file, recommended to manage in
/path/to/my-project/app/styles/global/_vendors.scss
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <link rel="stylesheet" href="/node_modules/path/to/some-plugin.css" />\n <!-- endbuild -->\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\ncss/vendors.css: The file path after building all third-party style files in BalmJS workflow.main.css: The css entry file of the project.Recommended to use for desktop
2.1.1 Import in JS (Recommended)
Edit /path/to/my-project/app/scripts/main.js
import { createApp } from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\n\n// Import BalmUI styles (Not recommend usage, and see above "SASS/CSS Management" for recommended usage)\nimport 'balm-ui-css';\n\nconst app = createApp(App);\n\napp.use(BalmUI); // Mandatory\napp.use(BalmUIPlus); // Optional\n\napp.mount('#app');\n2.1.2 Import in Browser
Edit /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui-plus.js"></script>\n <!-- endbuild -->\n <script>\n var app = Vue.createApp({\n setup() {\n var message = 'Hello BalmUI';\n\n return {\n message\n };\n }\n });\n\n app.use(BalmUI);\n app.use(BalmUIPlus);\n\n app.mount('#app');\n </script>\n </body>\n</html>\nRecommended to use for mobile, because the building volume is relatively small.
2.2.1 Import in JS
Edit /path/to/my-project/app/scripts/main.js
import { createApp } from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\n// Import BalmUI styles (Not recommend usage, and see below "SASS/CSS management" for recommended usage)\nimport 'balm-ui/components/core.css';\nimport 'balm-ui/components/button/button.css';\nimport 'balm-ui/components/icon/icon.css';\nimport 'balm-ui/components/dialog/dialog.css';\nimport 'balm-ui/plugins/alert/alert.css';\n\nconst app = createApp(App);\n\n// Install components or plugins\napp.use(UiButton);\napp.use($alert);\n\napp.mount('#app');\nWith regard to CSSinJS, styles can be extracted through BalmJS configuration, but the idea of BalmJS is more recommended to separate and manage styles and scripts to achieve more flexible module configuration and management.
SASS management (/path/to/my-project/app/styles/global/_vendors.scss)
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\nCSS management (/path/to/my-project/app/index.html)
<head>\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n</head>\n2.2.2 Import in Browser
Edit /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/components/button/button.js"></script>\n <script src="/node_modules/balm-ui/plugins/alert/alert.js"></script>\n <!-- endbuild -->\n <script>\n var app = Vue.createApp({\n setup() {\n var message = 'Hello BalmUI';\n\n return {\n message\n };\n }\n });\n\n app.use(UiButton);\n app.use($alert);\n\n app.mount('#app');\n </script>\n </body>\n</html>\nFor the optimal code building solution, the usage is the same as the built versions.
\u26a0\ufe0f NOTE: alias for
balm-ui< 9.40.0
{\n 'balm-ui-source': 'balm-ui/src/scripts/index.js',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/plus.js'\n}\n2.3.1 For Balm CLI
Edit /path/to/my-project/config/balmrc.js, and add the following lines of code:
const path = require('path');\n\nfunction resolve(dir) {\n return path.join(__dirname, '..', dir);\n}\n\nmodule.exports = {\n ...\n scripts: {\n // To explicitly transpile a dependency with Babel\n includeJsResource: [\n resolve('node_modules/balm-ui/src/scripts')\n ],\n // Reassign the entry file\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts/balm-ui.js',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/balm-ui-plus.js'\n }\n },\n ...\n};\n2.3.2 For Vue CLI or Vite
vue-cli
// vue.config.js\nmodule.exports = {\n runtimeCompiler: true,\n transpileDependencies: ['node_modules/balm-ui/src/scripts'],\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts/balm-ui.js',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/balm-ui-plus.js'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-source', 'balm-ui/src/scripts/balm-ui.js')\n // .set('balm-ui-plus-source', 'balm-ui/src/scripts/balm-ui-plus.js');\n // }\n};\nvite
// vite.config.js\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n plugins: [vue()],\n resolve: {\n alias: {\n vue: 'vue/dist/vue.esm-bundler.js',\n 'balm-ui-source': 'balm-ui/src/scripts/balm-ui.js',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/balm-ui-plus.js'\n }\n }\n});\nNow, the
balm-uireferenced in the code points directly to the source code, which can be used to develop or debug BalmUI.
Edit /path/to/my-project/balm.config.js
const config = require('./config/balmrc');\n\nconst api = (mix) => {\n if (mix.env.isProd) {\n // ...\n } else {\n // Use BalmJS `copy` api\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n\nmodule.exports = (balm) => {\n return {\n config,\n api\n };\n};\nBalmUI is a modular and customizable Material Design UI library for Vue 3.
balm-ui(v8) for Vue 2, see v8.material.balmjs.com
We'd love for you to contribute and make BalmUI even better than it is today! Please make sure to read the Contributing Guide before making a pull request. You can submit any ideas as pull requests or as GitHub issues.
We officially support the last two versions of every major browser. Specifically, we test on the following browsers:
Please
Copy+Pasteor customize yours, if your need
File: /path/to/app/scripts/kill-ie.js
import { detectIE } from 'balm-ui'; // Default Usage\n// OR\n// import detectIE from 'balm-ui/utils/ie'; // Individual Usage\n\nconst IE = detectIE();\n\nconst isIE = IE && IE <= 11;\n\nconst killIE = () => {\n let body = document.getElementsByTagName('body')[0];\n let template = `<div class="kill-ie">\n <h1>Your browser is out-of-date. Please <a href="https://browsehappy.com/">download</a> one of the up-to-date, free and excellent browsers for better security, speed and comfort.</h1>\n <p>Recommended Choice\uff1a<a href="https://www.google.com/chrome/">Chrome</a></p>\n </div>`;\n\n body.innerHTML = template;\n};\n\nexport { isIE, killIE };\nFile: /path/to/app/scripts/main.js
import { isIE, killIE } from './kill-ie';\n\nif (isIE) {\n killIE();\n} else {\n // your code\n}\nFile: /path/to/app/styles/_kill-ie.scss
.kill-ie {\n position: absolute;\n text-align: center;\n background-color: #bdbdbd;\n\n h1 {\n font-size: 36px;\n }\n\n p {\n font-size: 24px;\n }\n\n a {\n text-decoration: underline;\n color: red;\n font-weight: bold;\n }\n}\nYou need to set up your development environment before you can do anything.
Install Node.js\xae and npm if they are not already on your machine.
Verify that you are running at least Node.js version 10.13.0 or greater and npm version 5.2.0 or greater by running
node -vandnpm -vin a terminal/console window. Older versions produce errors, but newer versions are fine.
Good tools make application development quicker and easier to maintain than if you did everything by hand.
The Balm CLI is a command line interface tool that scaffolds out a BalmJS project.
Balm CLI(Recommended) or Vue CLI/Vite or other toolchains \ud83d\ude80
First install the Balm Core and Balm CLI globally for Balm CLI.
npm install -g balm-core balm-cli\n# OR\nyarn global add balm-core balm-cli\n\u26a0\ufe0f NOTE: If you are using pnpm, please configure the
.npmrcfile for BalmUI
Hoisting everything to the the root of node_modules:
shamefully-hoist=true\nOr, hoisting only packages that match a pattern:
public-hoist-pattern[]="*balm*"\npublic-hoist-pattern[]="*deepmerge*"\npublic-hoist-pattern[]="*flatpickr*"\npublic-hoist-pattern[]="*material-components-web*"\npublic-hoist-pattern[]="@material*"\npublic-hoist-pattern[]="*quill*"\nOpen a terminal window.
Generate a new project and default app by running the following command:
balm init vue my-project\ncd my-project # Go to the project directory\nInstall dependencies
yarn\n# OR\nnpm install\nInstalls the necessary npm packages, This can take some time.
(China Only) \u5982\u679c\u201c\u7f51\u7edc\u201d\u4e0d\u79d1\u5b66\uff0c\u8bf7\u8bbe\u7f6e\u6dd8\u5b9d\u6e90
balm-uiyarn add balm-ui\n# OR\nnpm install --save balm-ui\nupdate balm.config.js
get Material Icons without downloading (or, download and extract to my-project/app/fonts)
const api = (mix) => {\n if (mix.env.isDev) {\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\nedit my-project/config/balmrc.js for using Dart Sass
module.exports = {\n styles: {\n extname: 'scss'\n }\n // Other Options...\n};\nedit my-project/app/styles/global/_vendors.scss
/* import BalmUI styles */\n@use 'balm-ui/dist/balm-ui';\nRecommend to use Sass in
/path/to/project-name/styles/_vendors.scss, and you can use more advanced style usage of the BalmUI.
edit my-project/app/scripts/main.js
import { createApp } from 'vue';\nimport App from '@/views/layouts/app';\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components\n\nconst app = createApp(App);\n\napp.use(BalmUI); // Mandatory\napp.use(BalmUIPlus); // Optional\n\napp.mount('#app');\nedit my-project/app/styles/global/_vendors.scss
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\nedit my-project/app/scripts/main.js
import { createApp } from 'vue';\nimport App from '@/views/layouts/app';\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\nconst app = createApp(App);\n\napp.use(UiButton);\napp.use($alert);\n\napp.mount('#app');\nnpm run dev\nedit a vue component: my-project/app/scripts/views/components/hello.vue
<template>\n <div class="hello">\n ...\n <!-- Add a test button -->\n <ui-button icon="add" @click="$alert('Hello BalmUI')">Click Me</ui-button>\n </div>\n</template>\nnpm run prod\nvue-cli
vue create my-project\n\ncd my-project\nvite
# npm 6.x\nnpm init @vitejs/app my-project --template vue\n\n# npm 7+, extra double-dash is needed:\nnpm init @vitejs/app my-project -- --template vue\n\n# yarn\nyarn create @vitejs/app my-project --template vue\n\ncd my-project\nbalm-uiyarn add balm-ui\n# OR\nnpm install --save balm-ui\nvue-cli
// vue.config.js\nmodule.exports = {\n runtimeCompiler: true,\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')\n // .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');\n // }\n};\nvite
// vite.config.js\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n plugins: [vue()],\n resolve: {\n alias: {\n vue: 'vue/dist/vue.esm-bundler.js',\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.esm.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n});\nedit my-project/src/main.js
import { createApp } from 'vue';\nimport App from './App.vue';\n\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\nimport 'balm-ui-css';\n\nconst app = createApp(App);\n\napp.use(BalmUI);\napp.use(BalmUIPlus);\n\napp.mount('#app');\n<script><!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Hello BalmUI</title>\n <link rel="stylesheet" href="https://unpkg.com/balm-ui/dist/balm-ui.css" />\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n <script src="https://unpkg.com/vue"></script>\n <script src="https://unpkg.com/balm-ui"></script>\n <script src="https://unpkg.com/balm-ui/dist/balm-ui-plus.js"></script>\n <script>\n const app = Vue.createApp({\n setup() {\n var message = 'Hello BalmUI';\n\n return {\n message\n };\n }\n });\n\n app.use(BalmUI);\n app.use(BalmUIPlus);\n\n app.mount('#app');\n </script>\n </body>\n</html>\nEnjoy \ud83d\udc7b
'},97789:function(t,e,o){"use strict";o.r(e);e.default='
balm-ui>= 9.40.0
alias
{\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n}\ntsconfig.json
{\n "compilerOptions": {\n "baseUrl": ".",\n "paths": {\n "balm-ui-plus": ["node_modules/balm-ui/dist/balm-ui-plus.d.ts"]\n }\n }\n}\nbalm-ui-next.js is deprecatedUiCollapse from balm-ui-plus.js to balm-ui.js libraryUiBottomNavigation from balm-ui-next.js to balm-ui-plus.js libraryUiBottomSheet from balm-ui-next.js to balm-ui-plus.js libraryvDebounce from balm-ui-plus.js to balm-ui.js libraryUiAlert from balm-ui-plus.js to balm-ui.js library$validator: update validations
Old
interface BalmUIValidationRule {\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = {\n [key: string]: BalmUIValidationRule;\n}\nNew
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = BalmUIValidationRule[]\n<ui-chips>: rename prop chips -> items<ui-nav>: remove prop modelValue, singleSelection and eventsUiAutocomplete, UiDatepicker, UiRangepicker from balm-ui-plus.js to balm-ui.js library$alert, $confirm, $toast from balm-ui-plus.js to balm-ui.js library<ui-icon-button>, <ui-textfield>, <ui-autocomplete>, <ui-editor>, <ui-select>, <ui-checkbox>, <ui-radio>, <ui-chips>, <ui-datepicker>, <ui-rangepicker>, <ui-switch>, <ui-slider>: rename prop model -> modelValue<ui-drawer>, <ui-menu>, <ui-dialog>, <ui-snackbar>, <ui-banner>: rename prop open -> modelValue<ui-tab-bar>, <ui-tabs>: rename prop active -> modelValue<ui-pagination>: rename prop page -> modelValue<ui-list>: rename prop selectedIndex -> modelValue<ui-table>: rename prop selectedRows -> modelValue<ui-textfield>, <ui-autocomplete>, <ui-checkbox>, <ui-radio>, <ui-file>, <ui-datepicker>, <ui-switch>: rename prop id -> inputId<ui-icon-button>, <ui-drawer>, <ui-tab-bar>, <ui-tabs>, <ui-menu>, <ui-pagination>, <ui-editor>, <ui-select>, <ui-checkbox>, <ui-radio>, <ui-chips>, <ui-datepicker>, <ui-rangepicker>, <ui-switch>, <ui-slider>, <ui-dialog>, <ui-snackbar>, <ui-banner>: rename event @change -> @update:modelValue<ui-textfield>, <ui-autocomplete>: rename event @input -> @update:modelValue<ui-list>: rename event @action -> @update:modelValue<ui-table>: rename event @selected -> @update:modelValuenew components:
<ui-banner><ui-tooltip><ui-nav-item>new plugins:
$bus$store$theme: new theme apis
v-shape: new shape apis
<ui-menuitem>: add prop value
<ui-form>: add prop itemMarginBottom, labelWidth, labelMarginRight, labelMarginBottom
Sass: overwrite variables become more concise and clear
Old
@use '@material/button/variables';\nNew
@use '@material/button';\n$themeColor, $setTheme, $textColor, $setTextTheme: deprecated. Use $theme instead<ui-slider>: rename prop displayMarker to withTickMarks<ui-pagination>:before, before-jumper and after-jumperfirst and last<ui-nav>: remove slot prop itemClass, activeClass. Use <ui-nav-item> for new<ui-table>: thead custom item by field rename to columnId<ui-drawer>: add prop viewportHeight<ui-menu>, <ui-select>: both add prop fullwidth<ui-textfield>: add prop prefixText, suffixText, endAligned, withCounterv-anchor: add modifier bodyElement<ui-a><ui-icon-a><ui-nav>: rename slot prop activatedClass to activeClass<ui-textfield>: remove prop dense<ui-textfield-helper>: rename prop counter to withCounter<ui-textfield-counter>: removed. It has been replaced with <ui-textfield-helper withCounter> or <ui-textfield withCounter><ui-icon-button></ui-icon-button>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean | false | Sets the toggle state. |
icon | string | '' | A material icon of the icon button. See Material Icons list. |
toggle | object | {} | Two icons of the icon button toggle. (Format: {on, off}) |
Configuring the toggle button states by toggle.on and toggle.off props
interface IconButton {\n toggle: {\n on: string;\n off: string;\n };\n}\n| Name | Props | Description |
|---|---|---|
default | onClass, offClass | The default slot holds the toggle or link custom icons and can contain HTML. |
<template #default="{ onClass, offClass }">\n <i :class="onClass">ON</i>\n <i :class="offClass">OFF</i>\n</template>\n| Name | Type | Description |
|---|---|---|
click | function(event: object) | Emits when the icon button is clicked. |
update:modelValue | function(value: boolean) | Emits when the icon button is toggled. |
NOTE: If you are not using
v-model, you should listen for the icon button using@update:modelValueand update themodelValueprop.
Automatic
<ui-icon-button v-model="value"></ui-icon-button>\nManual
<ui-icon-button\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-icon-button>\nIcon buttons (Toggle buttons) allow users to take actions, and make choices, with a single tap.
'},60716:function(t,e,o){"use strict";o.r(e);e.default='<ui-icon><!-- the material design icon name --></ui-icon>\n<ui-icon> Types
0: 'filled'1: 'outlined'2: 'round'3: 'twoTone'4: 'sharp'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | Material icon theme. |
outlined | boolean | false | Outlined icons customize stroke and fill attributes for a light, clean style that works well in dense UIs. The stroke weight of outlined icons can be adjusted to complement or contrast the weight of your typography. |
round | boolean | false | Rounded icons use a corner radius that pairs well with brands that use heavier typography, curved logos, or circular elements to express their style. |
twoTone | boolean | false | Two-tone icons have added dimension, using the attributes of stroke, fill, and color. Contrasting stroke and fill colors enables the use of multiple brand colors and can improve legibility. |
sharp | boolean | false | Sharp icons display corners with straight edges, for a crisp style that remains legible even at smaller scales. These rectangular shapes can support brand styles that aren\u2019t well-reflected by rounded shapes. |
size | number | 24 | Material icon sizing. |
dark | boolean | false | An icon on a light background with a dark foreground color. |
light | boolean | false | An icon on a dark background with a light foreground color. |
inactive | boolean | false | An icon is disabled or inactive. |
Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, we recommend them to be shown in either
18,24,36or48px.
| Name | Props | Description |
|---|---|---|
default | The default slot holds the material design icon name and can contain HTML. |
| Name | Type | Description |
|---|---|---|
click | function(event: object) | Emits when the icon is clicked. |
Material icons are delightful, beautifully crafted symbols for common actions and items.
'},82692:function(t,e,o){"use strict";o.r(e);e.default='<ui-image-item><!-- image and text --></ui-image-item>\n| Name | Type | Default | Description |
|---|---|---|---|
image | string | null | Add the src attribute directly to the <img> in the image container. |
bgImage | string | null | Use a <div> instead of <img> element. |
| Name | Props | Description |
|---|---|---|
default | Optional. Indicates the area within each item containing the supporting text label, if the Image List contains text labels. | |
image | Optional. The image container displays an image list item\u2019s image or illustration. |
| Name | Type | Description |
|---|---|---|
click | function(event: object) | Emits when the item is clicked. |
<ui-image-list><!-- the image item components --></ui-image-list>\n<ui-image-list> Types
0: 'standard'1: 'masonry'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | Mandatory. Image list types. |
masonry | boolean | false | Optional. Indicates that this Image List should use the Masonry variant. |
textProtection | boolean | false | Optional. Indicates that supporting content should be positioned in a scrim overlaying each image (instead of positioned separately under each image). |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the image item components. |
<ui-image-text><!-- Text labels --></ui-image-text>\n| Name | Props | Description |
|---|---|---|
default | Text labels display one line of text related to an image list item. | |
action | Optional. Actionable iconography can represent related actions. |
Image lists display a collection of images in an organized grid.
'},94350:function(t,e,o){"use strict";o.r(e);e.default='<ui-image-list>\n <ui-image-item>\n <ui-image-text></ui-image-text>\n </ui-image-item>\n</ui-image-list>\n| Component | Description |
|---|---|
<ui-image-list> | Mandatory. Indicates the root Image List element. |
<ui-image-item> | Mandatory. Indicates each item in an Image List. |
<ui-image-text> | Optional. Indicates the area within each item containing the supporting text label, if the Image List contains text labels. |
Lists are continuous, vertical indexes of text or images.
'},90681:function(t,e,o){"use strict";o.r(e);e.default='<ui-list-divider></ui-list-divider>\n\n<ui-item-divider></ui-item-divider>\n| Name | Type | Default | Description |
|---|---|---|---|
padded | boolean | false | Optional, leaves gaps on each side of divider to match padding of the last tile. |
inset | boolean | false | Optional, increases the leading margin of the divider so that it does not intersect the avatar column. |
<ui-list-group>\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n</ui-list-group>\n<ui-item><!-- the item child components --></ui-item>\n\n<ui-nav-item><!-- the link item child components --></ui-nav-item>\n<ui-item> Props| Name | Type | Default | Description |
|---|---|---|---|
selected | boolean | false | Optional, styles the row in an selected state. |
disabled | boolean | false | Optional, styles the row in the disabled state. |
<ui-nav-item> Props| Name | Type | Default | Description |
|---|---|---|---|
href | string | (required) | Resolved url. This would be the href attribute of an a element. |
active | boolean | false | Optional, styles the row in the activated state. |
Usage with <router-link> (requires vue-router@3.1.0+)
<router-link v-slot="{ href, navigate, isActive }" custom>\n <ui-nav-item\n :href="href"\n :active="isActive"\n @click="navigate"\n ></ui-nav-item>\n</router-link>\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the item child components and can contain HTML. | |
before | iconClass | Custom <ui-item-first-content>. Optional, the first tile in the row. Typically an icon or image. |
after | iconClass | Custom <ui-item-last-content>. Optional, the last tile in the row. Typically small text, icon. or image. |
Child components:
<ui-item-text-content><ui-item-text1><ui-item-text2><ui-item-first-content><ui-item-last-content>| Name | Type | Description |
|---|---|---|
click | function(event: object) | Emits when the list item is clicked. |
<ui-list><!-- <ui-item> --></ui-list>\n\n<ui-nav><!-- <ui-nav-item> --></ui-nav>\n<ui-list> & <ui-nav> Types
1: 'singleLine'2: 'twoLine'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | Mandatory. List types. |
nonInteractive | boolean | false | Optional, disables interactivity affordances. |
dense | boolean | false | Optional, styles the density of the list, making it appear more compact. |
avatar | boolean | false | Optional, configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger. |
<ui-list> Props| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | number | -1 | The index of the selected list item. Applicable only for the single selection list. |
singleSelection | boolean | false | The list can handle selecting/deselecting list elements based on click or keyboard action. |
| Name | Slots | Description |
|---|---|---|
default | The default slot holds the item components and can contain HTML. |
<ui-list> Events| Name | Type | Description |
|---|---|---|
update:modelValue | function(selectedIndex: number) | Indicates that a list item with the specified index has been activated. |
NOTE: If you are not using
v-model, you should listen for the list using@update:modelValueand update themodelValueprop.
Automatic
<ui-list v-model="selectedIndex" single-selection></ui-list>\nManual
<ui-list\n :model-value="selectedIndex"\n single-selection\n @update:model-value="balmUI.onChange('selectedIndex', $event)"\n></ui-list>\n<ui-list-group>\n <ui-list-group-subheader>1. Single-line list</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-text-content></ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>2. Two-line list</ui-list-group-subheader>\n <ui-list type="twoLine">\n <ui-item>\n <ui-item-text-content>\n <ui-item-text1></ui-item-text1>\n <ui-item-text2></ui-item-text2>\n </ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>3. Rich List</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-first-content></ui-item-first-content>\n <ui-item-text-content></ui-item-text-content>\n <ui-item-last-content></ui-item-last-content>\n </ui-item>\n </ui-list>\n</ui-list-group>\n<ui-nav>\n <ui-nav-item active>Activated item</ui-nav-item>\n <ui-nav-item>Unactivated item</ui-nav-item>\n</ui-nav>\n| Component | Description |
|---|---|
<ui-list>/<ui-nav> | Mandatory, for the list element. |
<ui-item>/<ui-nav-item> | Mandatory, for the list item element. |
<ui-item-text-content> | Mandatory. Wrapper for list item text content (displayed as middle column of the list item). |
<ui-item-text1> | Optional, primary text for the list item. Should be the child of <ui-item-text-content>. |
<ui-item-text2> | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of <ui-item-text-content>. |
<ui-item-first-content> | Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image. |
<ui-item-last-content> | Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image. |
<ui-list-group> | Optional, wrapper around two or more <ui-list> elements to be grouped together. |
<ui-list-group-subheader> | Optional, heading text displayed above each list in a group. |
<ui-list-divider> | Optional, for list divider element. |
<ui-item-divider> | Optional, for list item divider element. |
'},98314:function(t,e,o){"use strict";o.r(e);e.default='New in 9.21.0
<div v-longpress></div>\ntype LongpressConfig =\n | Function // New in 10.9.1\n | {\n callback: Function;\n delay?: number;\n };\nMenus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
'},71456:function(t,e,o){"use strict";o.r(e);e.default='<ui-menu-anchor><!-- the menu component --></ui-menu-anchor>\n| Name | Type | Default | Description |
|---|---|---|---|
position | string | '' | Menu button position to the menu anchor. |
absolute | boolean | false | The menu surface can use absolute positioning when being displayed. This requires that the element containing the menu has the position: relative style. |
interface MenuAnchor {\n position:\n | 'top left'\n | 'top right'\n | 'middle left'\n | 'middle right'\n | 'bottom left'\n | 'bottom right';\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the menu component. |
<ui-menu><!-- the menuitem components --></ui-menu>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean | false | Mandatory. |
items | array | [] | Menu items. |
quickOpen | boolean | false | Turn off menu open animations. |
position | string | 'TOP_LEFT' | Menu position to the menu button. |
distance | object | false | Anchor margin. Value format: { top, right, bottom, left }. |
fixed | boolean | false | Used to indicate that the menu is using fixed positioning. |
fullwidth | boolean | false | Sets the menu surface's width to match that of its parent anchor. Do not use with fixed or if hoisting to body. |
cssOnly | boolean | false | Show static menu. |
The keys of the menuitem:
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface Menu {\n items: Item[];\n position:\n | 'TOP_LEFT'\n | 'TOP_RIGHT'\n | 'BOTTOM_LEFT'\n | 'BOTTOM_RIGHT'\n | 'TOP_START'\n | 'TOP_END'\n | 'BOTTOM_START'\n | 'BOTTOM_END';\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the menuitem components. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | Emits when the menu is changed. |
selected | function(menuitem: SelectedItem) | Emits when an element has been selected. |
closed | function() | Emits when the menu is closed. |
opened | function() | Emits when the menu is opened. |
selected event return data:
interface SelectedItem {\n index: number; // menuitem index\n text: string; // menuitem text\n value: string; // selected value\n}\nNOTE: If you are not using
v-model, you should listen for the menu using@update:modelValueand update themodelValueprop.
Automatic
<ui-menu v-model="open"></ui-menu>\nManual
<ui-menu\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-menu>\n<ui-menuitem><!-- the menu item child components --></ui-menuitem>\n| Name | Type | Default | Description |
|---|---|---|---|
nested | boolean | false | Used to wrap a group of <ui-menuitem> that will represent a selection group. |
item | object | {} | A menu item. |
value | string | null | The menu selected value. |
disabled | boolean | false | To disable an item. |
selected | boolean | false | Used to indicate which element in an item group is selected. |
The keys of a menu item object:
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface MenuItem {\n item: Item;\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the menu item icon component or label text and can contain HTML. |
Child components:
<ui-menuitem-text><ui-menuitem-icon><ui-menu-anchor>\n <ui-menu :items="menuItems"></ui-menu>\n</ui-menu-anchor>\n<ui-menu-anchor>\n <ui-menu>\n <ui-menuitem>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n\n <ui-menuitem-divider></ui-menuitem-divider>\n\n <ui-menuitem nested>\n <ui-menuitem>\n <ui-menuitem-icon>Icon</ui-menuitem-icon>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n </ui-menuitem>\n </ui-menu>\n</ui-menu-anchor>\n| Component | Description |
|---|---|
<ui-menu-anchor> | Used to indicate which element the menu should be anchored to. |
<ui-menu> | Required on the root element. |
<ui-menuitem> | A menu item. |
<ui-menuitem-text> | A menu item text. |
<ui-menuitem-icon> | Required when using a <ui-menuitem nested> to indicate which item is selected. Should contain an icon or svg that indicates the selected state of the <ui-menuitem>. |
<ui-menuitem-divider> | Optional, for menu item divider element. (Equivalent to <ui-item-divider>) |
New in 9.25.0
Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.
'},81964:function(t,e,o){"use strict";o.r(e);e.default='<ui-navigation-bar>\n <!-- <ui-tabs> or <ui-tab-bar> component -->\n</ui-navigation-bar>\n<ui-bottom-navigation> is deprecated in 10.1.0, use <ui-navigation-bar> instead.| Name | Type | Default | Description |
|---|---|---|---|
contentSelector | string | (required) | Mandatory. Selector used to style the content above the navigation bar, to prevent the navigation bar from covering it. |
stacked | boolean | false | Optional. Indicates that the tab icon and label should flow vertically instead of horizontally. |
min | boolean | false | Show 3 navigation items. |
max | boolean | false | Show 5 navigation items. |
Pagination controls provide swift access to all pages while indicating that more pages exist.
'},50154:function(t,e,o){"use strict";o.r(e);e.default='<ui-pagination></ui-pagination>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | number | 1 | Current page number. | |
total | number | 0 | The total number of data items. | |
pageSpan | number, boolean | 3 | Display the first N pages of the current page. (MIN VALUE: 3) | |
showTotal | boolean | false | Display total info. | |
pageSize | number, array | 10 | The number of data items per page. | |
pageSizeText | string, array | 'Rows per page' | The page size before/after text. | |
ofText | string | 'of' | The page total of text. | 9.39.0 |
unitText | string | '' | The page total unit text. | 10.11.0 |
showJumper | boolean | false | Determine whether you can jump to pages directly. | |
jumperText | string, array | 'Goto' | The jumper before/after text. | |
jumperButtonOutlined | boolean | false | Styles an outlined jumper button. | 9.11.0 |
jumperButtonText | string | '' | The jumper button text. | |
position | string | '' | The pagination position. | |
mini | boolean | false | Whether to use simple mode. |
interface Pagination {\n position: 'left' | 'center' | 'right';\n}\n| Name | Props | Description | Version |
|---|---|---|---|
default | currentMinRow, currentMaxRow | The custom page size area. | 9.3.0 |
first | The custom first button icon. | ||
prev | The custom previous button icon. | ||
next | The custom next button icon. | ||
last | The custom last button icon. |
| Name | Type | Description | Version |
|---|---|---|---|
update:modelValue | function(page: number) | Emits when the pagination page is changed. | |
update:pageSize | function(pageInfo: object) | Emits when the pagination page size is changed. | 10.4.0 |
NOTE: If you are not using
v-model, you should listen for the pagination using@update:modelValueand update themodelValueprop.
Automatic
<ui-pagination v-model="page"></ui-pagination>\nManual
<ui-pagination\n :model-value="page"\n @update:model-value="balmUI.onChange('page', $event)"\n></ui-pagination>\nLinear progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.
'},97332:function(t,e,o){"use strict";o.r(e);e.default='<ui-progress></ui-progress>\n| Name | Type | Default | Description |
|---|---|---|---|
active | boolean | false | Puts the linear progress indicator in an indeterminate state. |
progress | number | 0 | Sets the progress bar to this value. Value should be between [0, 1]. |
buffer | number | 0 | Sets the buffer bar to this value. Value should be between [0, 1]. |
label | string | '' | Label indicating how the progress bar should be announced to the user. |
closed | boolean | false | Hides the linear progress indicator. |
Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.
'},14176:function(t,e,o){"use strict";o.r(e);e.default='<ui-form-field>\n <ui-radio></ui-radio>\n <label>Radio</label>\n</ui-form-field>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | string, number | '' | Mandatory. |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label>. |
value | string, number | '' | The value attribute of the <input>. |
disabled | boolean | false | Styles the radio button as a disabled radio button. |
attrs | object | {} | Other attributes for <input>. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: string|number) | Emits when the radio button is changed. |
NOTE: If you are not using
v-model, you should listen for the radio using@update:modelValueand update themodelValueprop.
Automatic
<ui-radio v-model="value"></ui-radio>\nManual
<ui-radio\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-radio>\n<ui-rangepicker></ui-rangepicker>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
outlined | boolean | false | Styles the rangepicker as an outlined text field. (labels or placeholders required) | |
modelValue (v-model) | array | '' | Mandatory. | |
disabled | boolean | false | Styles the rangepicker as a disabled text field. | |
labels | array | [] | A text caption or description for the rangepicker, which use the start and end input's placeholder attribute instead. | |
placeholders | array | [] | The placeholder attribute of the start and end <input>. | |
config | object | {} | See Flatpickr configuration. | |
disableRangePlugin | boolean | false | Disables the flatpickr rangePlugin and use two <ui-datepicker> instead. | 10.16.0 |
| Name | Props | Description |
|---|---|---|
separator | The custom separator. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: array) | Emits when the rangepicker value is changed. |
NOTE: If you are not using
v-model, you should listen for the rangepicker using@update:modelValueand update themodelValueprop.
Automatic
<ui-rangepicker v-model="value"></ui-rangepicker>\nManual
<ui-rangepicker\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-rangepicker>\nThe Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.
'},51412:function(t,e,o){"use strict";o.r(e);e.default='<div v-ripple></div>\nNOTE: Dynamic class are not supported
v-ripple="color"v-ripple:cssOnly="color"| Value | Type | Default | Description |
|---|---|---|---|
color | number, string | undefined | Sets the ripple color |
1 or 'primary'.2 or 'secondary'.v-ripple.unbounded="color"v-ripple:cssOnly.unbounded="color"Segmented buttons allow users to toggle the selected states of grouped buttons.
'},98061:function(t,e,o){"use strict";o.r(e);e.default='New in 9.5.0
<ui-segmented-button></ui-segmented-button>\n| Name | Type | Default | Description |
|---|---|---|---|
selected | boolean | false | Styles a selected segmented button. |
text | string | '' | Segmented button text. |
icon | string | '' | Segmented button icon. See Material Icons list. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the segmented button text and can contain HTML. | |
before | iconClass | Custom leading icon |
after | iconClass | Custom trailing icon |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n| Name | Type | Description |
|---|---|---|
click | function(event: object) | Emits when the segmented button is clicked. |
<ui-segmented-buttons :items="buttonGroupItems"></ui-segmented-buttons>\n<ui-segmented-buttons>\n <ui-segmented-button></ui-segmented-button>\n</ui-segmented-buttons>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | array, number | [] | Mandatory. |
items | array | [] | Segmented button items. |
singleSelect | boolean | false | To make the segmented button single select. |
The keys of a segmented button item object:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the segmented button. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(selectedIndex: array | number) | Emits when the segmented buttons is changed. |
selected | function(index: number) | Emits when the segmented button is clicked. |
NOTE: If you are not using
v-model, you should listen for the segmented buttons using@update:modelValueand update themodelValueprop.
Automatic
<ui-segmented-buttons v-model="selectedIndex"></ui-segmented-buttons>\nManual
<ui-segmented-buttons\n :model-value="selectedIndex"\n @update:model-value="balmUI.onChange('selectedIndex', $event)"\n></ui-segmented-buttons>\n<ui-select-helper><!-- the helper text --></ui-select-helper>\n| Name | Type | Default | Description |
|---|---|---|---|
id | string | null | Mandatory. (Corresponding to the helperTextId prop matching <ui-select>) |
visible | boolean | false | Makes the helper text permanently visible. |
validMsg | string, boolean | false | Indicates the helper text is a validation message. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the select helper text and can contain HTML. |
<ui-select-icon><!-- the material design icon name --></ui-select-icon>\n| Name | Type | Default | Description |
|---|---|---|---|
unclickable | boolean | false | Display un-clickable icons. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the select icon and can contain HTML. See Material Icons list. |
| Name | Type | Description |
|---|---|---|
click | function(event: object) | Emits when the select icon is clicked. |
<ui-select><!-- the label text --></ui-select>\n<ui-select> Types
0: 'filled'1: 'outlined'| Name | Type | Default | Description | Version |
|---|---|---|---|---|
type | string, number | 0 | Mandatory. Enhanced select types. | |
outlined | boolean | false | Styles the select as an outlined select. (Equivalent to type=1) | |
modelValue (v-model) | string, number | '' | The value of the currently selected option. | |
options | array | [] | An array of options to show to the user. (Default option format: { label, value }) | |
optionFormat | object | { label: 'label', value: 'value' } | Defines the option data format. | 9.34.0 |
defaultLabel | string | '' | Placeholder item label. | |
defaultValue | string, number | '' | Placeholder item value. | |
label | string | '' | A text caption or description for the select. | |
disabled | boolean | false | Styles the select as disabled. | |
required | boolean | false | Styles the select as required. | |
fullwidth | boolean | false | Optional. Styles the select as full width select. | |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. | |
withLeadingIcon | boolean | false | Styles the select as a select with a leading icon. | |
helperTextId | string | null | Required for the id attribute of the <ui-select-helper>. | |
inside | boolean | false | Styles for the overflow inside component (e.g. in <ui-dialog>) | 10.10.0 |
NOTE:
withLeadingIconis only used for (non<ui-select-icon>) custom leading icon, and generally do not need to be configured.
\u26a0\ufe0f The prop
optionLabelandoptionValueis deprecated, useoptionFormatinstead in9.34.0.
| Name | Props | Description |
|---|---|---|
default | The default slot holds the label for the select. | |
icon | iconClass | The icon slot holds a custom leading icon. |
dropdown-icon | Custom dropdown icon. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: string|number) | Emits when the select value is changed. |
selected | function(option: object) | Emits when an option item is selected. |
NOTE: If you are not using
v-model, you should listen for the select using@update:modelValueand update themodelValueprop.
Automatic
<ui-select v-model="value"></ui-select>\nManual
<ui-select\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-select>\nShapes direct attention, identify components, communicate state, and express brand.
'},55303:function(t,e,o){"use strict";o.r(e);e.default='<div v-shape></div>\nv-shape="corner" (medium)v-shape.small="corner"v-shape.large="corner"v-shape.cut="corner" (medium)v-shape.cut.small="corner"v-shape.cut.large="corner"| Value | Type | Default | Description |
|---|---|---|---|
| corner | string | '' | Element for masking a specific corner; there may be up to 4. (Use shape sass radius variable when value is empty) |
Syntax is similar to CSS
border-radiusproperty.
<!-- The syntax of the first corner allows one to four values -->\n<!-- Radius is set for all 4 sides -->\n<div v-shape="'4px'"></div>\n\n<!-- top-left | bottom-right -->\n<div v-shape="'4px 0'"></div>\n\n<!-- top-right | bottom-left -->\n<div v-shape="'0 4px'"></div>\n\n<!-- top-left -->\n<div v-shape="'4px 0 0'"></div>\n\n<!-- top-left | top-right | bottom-left -->\n<div v-shape="'4px 4px 0'"></div>\n\n<!-- top-left | top-right | bottom-right | bottom-left -->\n<div v-shape="'4px 4px 4px 4px'"></div>\n'},39737:function(t,e,o){"use strict";o.r(e);e.default='New in 10.19.0
<ui-side-sheet></ui-side-sheet>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean | false | Mandatory. |
closable | boolean | false | Displays close icon button. |
| Name | Props | Description |
|---|---|---|
title | The title slot holds the title for the side sheet. | |
default | The default slot holds the content for the side sheet. | |
actions | The actions slot holds the actions for the side sheet. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | Emits when the side sheet is hidden. |
NOTE: If you are not using
v-model, you should listen for the side sheet using@update:modelValueand update themodelValueprop.
Automatic
<ui-side-sheet v-model="open"></ui-side-sheet>\nManual
<ui-side-sheet\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-side-sheet>\nSkeleton provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
'},2219:function(t,e,o){"use strict";o.r(e);e.default='<ui-skeleton><!-- (the loaded data) --></ui-skeleton>\n| Name | Type | Default | Description |
|---|---|---|---|
loading | boolean | true | Display the skeleton. |
active | boolean | false | Show animation effect. |
avatar | boolean, object | false | Show avatar placeholder. |
title | boolean, object | true | Show title placeholder. |
paragraph | boolean, object | true | Show paragraph placeholder. |
interface Skeleton {\n avatar: {\n size: 'large' | 'small' | number; // Set the size of avatar\n shape: 'circle' | 'square'; // Set the shape of avatar\n };\n title: {\n width: string; // Set the width of title\n };\n paragraph: {\n width: string; // Set the width of paragraph\n rows: number; // Set the row count of paragraph\n };\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the any components and can contain HTML. |
Sliders allow users to make selections from a range of values.
'},71535:function(t,e,o){"use strict";o.r(e);e.default='<ui-slider></ui-slider>\n<ui-slider> Types
0: 'continuous'1: 'discrete'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | Mandatory. Slider types. |
discrete | boolean | false | Styles the slider as a discrete slider. |
withTickMarks | boolean | false | Discrete sliders support display markers on their tracks. |
modelValue (v-model) | number, array | 0 | The current value of the slider. (array value for range slider) |
min | number | 0 | The minimum value a slider can have. |
max | number | 100 | The maximum value a slider can have. |
step | number | 1 | Specifies the increments at which a slider value can be set. |
disabled | boolean | false | Whether or not the slider is disabled. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: number|array) | Emits when a user stops dragging the slider or changes the value. |
NOTE: If you are not using
v-model, you should listen for the slider using@update:modelValueand update themodelValueprop.
Automatic
<ui-slider v-model="value"></ui-slider>\nManual
<ui-slider\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-slider>\nFor asynchronous data
<ui-slider ref="slider" v-model="value"></ui-slider>\n$refs.slider.recompute(): relayoutSnackbars provide brief messages about app processes at the bottom of the screen.
'},68186:function(t,e,o){"use strict";o.r(e);e.default='<ui-snackbar><!-- the message text --></ui-snackbar>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
actionType | number | 0 | Mandatory. Sets action button or dismiss icon for the snackbar. (0: action button, 1: dismiss icon) | |
modelValue (v-model) | boolean | false | Mandatory. | |
timeoutMs | number | 5000 | Optional. The automatic dismiss timeout in milliseconds. Value must be between 4000 and 10000 or an error will be thrown. | |
message | string | '' | Mandatory. Message text. | |
actionButtonText | string | '' | Optional. The action button/icon elements, if present. | |
stacked | boolean | false | Optional. Positions the action button/icon below the message instead of alongside it. | |
leading | boolean | false | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered. (tablet and desktop only) | |
position | string | 'bottom' | Snackbar position. | 9.21.0 |
interface Snackbar {\n position: 'bottom' | 'center' | 'top';\n}\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the message text for the snackbar. | |
action | actionClass | The custom action button. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | Emits when the snackbar is hidden. |
closed | function() | Emits when the snackbar is closed. |
NOTE: If you are not using
v-model, you should listen for the snackbar using@update:modelValueand update themodelValueprop.
Automatic
<ui-snackbar v-model="open"></ui-snackbar>\nManual
<ui-snackbar\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-snackbar>\nCircular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.
'},29377:function(t,e,o){"use strict";o.r(e);e.default='<ui-spinner></ui-spinner>\n| Name | Type | Default | Description |
|---|---|---|---|
active | boolean | false | Puts the circular progress indicator in an indeterminate state. |
progress | number | 0 | Sets the progress bar to this value. Value should be between [0, 1]. |
size | string | 'large' | To set the circular progress size. |
fourColored | boolean | false | You may choose to have the indicator in inderminate state animate through 4 colors. |
label | string | '' | Label indicating how the progress bar should be announced to the user. |
closed | boolean | false | Hides the circular progress indicator. |
Size value:
interface Spinner {\n size: 'large' | 'L' | 'medium' | 'M' | 'small' | 'S';\n}\nA simpler state management pattern.
'},22016:function(t,e,o){"use strict";o.r(e);e.default='// `/path/to/app/scripts/store/index.js`\nimport useDemoStore from './demo';\n\nexport default {\n ...useDemoStore()\n};\n// `/path/to/app/scripts/store/demo.js`\nimport { reactive, toRefs } from 'vue';\nimport { useHttp } from '@/plugins/http'; // e.g. axios\n\nconst state = reactive({\n demoMenu: []\n});\n\nasync function getDemoMenu() {\n const $http = useHttp();\n state.demoMenu = await $http.get('/api/get-menu');\n}\n\nconst useDemoStore = () => {\n return {\n ...toRefs(state),\n getDemoMenu\n };\n};\n\nexport default useDemoStore;\nComposition API
<ui-button @click="store.getDemoMenu">Test</ui-button>\n<ui-divider></ui-divider>\n{{ store.demoMenu }}\nimport { onBeforeMount } from 'vue';\nimport { useStore } from 'balm-ui';\n\nexport default {\n setup() {\n const store = useStore();\n\n onBeforeMount(() => {\n store.getDemoMenu();\n });\n\n return {\n store\n };\n }\n};\nOptions API
<ui-button @click="$store.getDemoMenu">Test</ui-button>\n<ui-divider></ui-divider>\n{{ $store.demoMenu }}\nexport default {\n beforeMount() {\n this.$store.getDemoMenu();\n }\n};\nSwitches toggle the state of a single item on or off. They are the preferred way to adjust settings on mobile.
'},27782:function(t,e,o){"use strict";o.r(e);e.default='<ui-form-field>\n <ui-switch></ui-switch>\n <label>Switch</label>\n</ui-form-field>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean | false | Mandatory. |
trueValue | boolean, number, string | true | |
falseValue | boolean, number, string | false | |
disabled | boolean | false | Styles the switch as a disabled switch. |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: boolean) | Emits when the switch is changed. |
selected | function(value: boolean|string|number) | Emits when the switch is selected. |
NOTE: If you are not using
v-model, you should listen for the switch using@update:modelValueand update themodelValueprop.
Automatic
<ui-switch v-model="value"></ui-switch>\nManual
<ui-switch\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-switch>\nData tables display sets of data across rows and columns.
'},29541:function(t,e,o){"use strict";o.r(e);e.default='<ui-table></ui-table>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
data | array | [] | Data source. | |
thead | array | [] | Table header renderer. | |
tbody | array | [] | Table content renderer. | |
tfoot | array | [] | Table footer renderer. | |
fullwidth | boolean | false | Styles the table as a full width table. | |
rowCheckbox | boolean | false | Data table with row selection. | |
rowCheckboxDisabled | function, boolean | false | Exclude row selections. | 10.9.0 |
modelValue (v-model) | array | [] | Selected row indexes/ids. (Required: rowCheckbox: true) | |
selectedKey | boolean, string | false | modelValue use custom key field, default use row index. | |
rowIdPrefix | string | '' | The prefix of data-row-id attribute value on row element tr. | |
sortIconAlignEnd | boolean | false | The sort icon will be positioned after the label. | |
showProgress | boolean | false | Styles the table with progress indicator for data loading. | 9.7.0 |
fixedHeader | boolean | false | Styles the table as a fixed header. | 9.7.0 |
defaultColWidth | number | 0 | Set the default column width for the fixed table. | 9.7.0 |
scroll | object | { x: false, y: false } | Set the table container size for the fixed table. | 9.7.0 |
thead & tbody & tfoot props common format
interface TableCell {\n value: string; // Cell content\n numeric: boolean; // Numeric cell is displayed right (Equivalent to `align: 'right'`)\n align: 'left' | 'center' | 'right'; // Text alignment\n class: string; // Custom classname\n slot: string; // Custom slot for cell\n}\nthead format
default items (string[])
[\n 'ID',\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n];\ncustom items (object[] or object[][])
interface Thead {\n sort: 'none' | 'asc' | 'desc'; // Sorting\n columnId: string; // sort field, e.g. 'id'\n rowspan: number;\n colspan: number;\n}\n[\n [\n {\n value: 'ID',\n rowspan: 2,\n sort: 'asc',\n columnId: 'id'\n },\n {\n value: 'Type1',\n colspan: 2,\n align: 'center'\n },\n {\n value: 'Type2',\n colspan: 3,\n align: 'center'\n },\n {\n value: 'Actions',\n rowspan: 2\n }\n ],\n [\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n ]\n];\ntbody format
default fields (string[])
['id', 'dessert', 'calories', 'fat', 'carbs', 'protein'];\ncustom fields (object[])
interface Tbody {\n field: string; // Data field name\n fn: function; // Simple data processing\n colClass: string; // The class name of the <col> element (New in 9.7.0)\n fixed: 'left' \uff5c 'right'; // Set column position for fixed cell (New in 9.7.0)\n width: number; // Set column width for fixed cell (New in 9.7.0)\n}\n[\n 'id',\n 'dessert',\n {\n field: 'calories',\n numeric: true,\n class: 'my-data'\n },\n {\n field: 'fat',\n fn: (data) => {\n return data.fat.toFixed(1);\n }\n },\n 'carbs',\n {\n field: 'protein',\n class: (data) => {\n return data.protein > 5 ? 'red' : 'green';\n }\n },\n {\n slot: 'actions'\n }\n];\n<ui-table>\n <template #actions="{ data }">\n <ui-icon @click="show(data)">description</ui-icon>\n <ui-icon @click="edit(data)">edit</ui-icon>\n <ui-icon @click="remove(data)">delete</ui-icon>\n </template>\n</ui-table>\ntfoot format (object[])
interface Tfoot {\n fnName: 'count' | 'sum' | 'avg' | 'max' | 'min'; // Frequently-used statistical method\n fn: function; // Simple data processing for result\n slot: string; // Custom slot for footer cell\n}\nfnName methods: count, sum, avg, max, min
[\n {\n field: 'id',\n fnName: 'count'\n },\n null,\n {\n field: 'calories',\n fnName: 'sum'\n },\n {\n field: 'fat',\n fnName: 'avg'\n },\n {\n field: 'carbs',\n fnName: 'max'\n },\n {\n field: 'protein',\n fnName: 'min'\n }\n];\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the pagination component and can contain HTML. | |
(custom-name) | Custom slot for cell |
| Name | Type | Description | Version |
|---|---|---|---|
update:modelValue | function(selectedRows: array) | Emits when row checkbox is changed. | |
sorted | function(detail: object) | Emits when clicked on sortable header cell. | 10.16.0 |
NOTE: If you are not using
v-model, you should listen for the table using@update:modelValueand update themodelValueprop.
Automatic
<ui-table v-model="selectedRows" row-checkbox></ui-table>\nManual
<ui-table\n :model-value="selectedRows"\n row-checkbox\n @update:model-value="balmUI.onChange('selectedRows', $event)"\n></ui-table>\nTabs organize content across different screens, data sets, and other interactions.
'},46183:function(t,e,o){"use strict";o.r(e);e.default='<ui-tab-bar><!-- the tab components --></ui-tab-bar>\n<ui-tab-bar> & <ui-tabs> common Props| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | number | 0 | Mandatory. |
<ui-tab-bar> Slots| Name | Slots | Description |
|---|---|---|
default | The default slot holds the tab scroller and tab components and can contain HTML. |
<ui-tab-bar> & <ui-tabs> common Events| Name | Type | Description |
|---|---|---|
update:modelValue | function(activeIndex: number) | Emits when the tab is changed. |
NOTE: If you are not using
v-model, you should listen for the tabs using@update:modelValueand update themodelValueprop.
Automatic
<ui-tab-bar v-model="activeIndex"></ui-tab-bar>\n<!-- OR -->\n<ui-tabs v-model="activeIndex"></ui-tabs>\nManual
<ui-tab-bar\n :model-value="activeIndex"\n @update:model-value="balmUI.onChange('activeIndex', $event)"\n></ui-tab-bar>\n<!-- OR -->\n<ui-tabs\n :model-value="activeIndex"\n @update:model-value="balmUI.onChange('activeIndex', $event)"\n></ui-tabs>\n<ui-tab-indicator></ui-tab-indicator>\n| Name | Type | Default | Description |
|---|---|---|---|
type | string | 'underline' | Mandatory. Indicator type. ['underline', 'icon'] |
fade | boolean | false | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the tab indicator icon and can contain HTML. |
'},77662:function(t,e,o){"use strict";o.r(e);e.default='NOTE:
underlinetype has not slot.
<ui-panels>\n <!-- the panel components -->\n <ui-panel><!-- the panel content --></ui-panel>\n</ui-panels>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | number | 0 | Mandatory. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the panel components and can contain HTML. |
<ui-tabs v-model="active">\n <ui-tab>Tab One</ui-tab>\n <ui-tab>Tab Two</ui-tab>\n <ui-tab>Tab Three</ui-tab>\n</ui-tabs>\n\n<ui-panels v-model="active">\n <ui-panel>Panel One</ui-panel>\n <ui-panel>Panel Two</ui-panel>\n <ui-panel>Panel Three</ui-panel>\n</ui-panels>\n<ui-tab-scroller><!-- the tab components --></ui-tab-scroller>\n| Name | Type | Default | Description |
|---|---|---|---|
scrollX (v-model:scrollX) | number | 0 | The current scroll value. |
align | string | '' | <ui-tabs> common prop. Tab alignment. |
interface TabScroller {\n align: 'start' | 'center' | 'end';\n}\n| Name | Type | Description |
|---|---|---|
update:scrollX | function(scrollX: number) | Emits when the tab scroller is changed. |
<ui-tab-scroller ref="scroller" v-model:scrollX="value"></ui-tab-scroller>\n$refs.scroller.increment(scrollX: number)<ui-tab><!-- The tab text label --></ui-tab>\n<ui-tab> & <ui-tabs> Types
0: 'text'1: 'iconOnly'2: 'textWithIcon'<ui-tab> & <ui-tabs> common Props| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | Mandatory. The permutation of tab labels. |
stacked | boolean | false | Optional. Indicates that the tab icon and label should flow vertically instead of horizontally. |
minWidth | boolean | false | Optional. Indicates that the tab should shrink in size to be as narrow as possible without causing text to wrap. |
contentIndicator | boolean | false | Optional. Text label width-matching indicator. |
<ui-tab> Props| Name | Type | Default | Description |
|---|---|---|---|
text | string | '' | Tab text. |
icon | string | '' | Tab icon. See Material Icons list. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the tab labels and can contain HTML. | |
icon | iconClass | The icon slot holds the custom icon and can contain HTML. |
indicator | The indicator slot holds the tab indicator component. |
<ui-tab>\n <template #icon="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-tab>\n<ui-tabs></ui-tabs>\n<ui-tabs> Props| Name | Type | Default | Description |
|---|---|---|---|
items | array | [] | Mandatory. Tab items. |
The keys of a tab item object:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n<ui-tabs> Slots| Name | Slots | Description |
|---|---|---|
default | The default slot holds the tab components and can contain HTML. |
<!-- Full syntax -->\n<ui-tab-bar v-model="active">\n <ui-tab\n v-for="(tabItem, tabIndex) in items"\n :key="tabIndex"\n :icon="tabItem.icon"\n >\n {{ tabItem.text }}\n </ui-tab>\n</ui-tab-bar>\n\n<!-- Shorthand -->\n<ui-tabs v-model="active" :items="items"></ui-tabs>\n<ui-tabs :items="tabItems"></ui-tabs>\n<ui-tab-bar>\n <ui-tab>\n Tab Text\n <template #indicator>\n <ui-tab-indicator></ui-tab-indicator>\n </template>\n </ui-tab>\n</ui-tab-bar>\n\n<ui-panels>\n <ui-panel></ui-panel>\n</ui-panels>\n| Component | Description |
|---|---|
<ui-tabs> | The shorthand for <ui-tab-bar> + <ui-tab>. |
<ui-tab-bar> | Tab items container. |
<ui-tab> | Tab item. |
<ui-panels> | Tab panels container. |
<ui-panel> | Tab panel. |
<ui-tab-indicator> | Contains the custom tab indicator content. |
<ui-tab-scroller> | Contains the custom tab scroller content. |
Text fields let users enter and edit text.
'},54789:function(t,e,o){"use strict";o.r(e);e.default='<ui-textfield-helper><!-- the helper text --></ui-textfield-helper>\n| Name | Type | Default | Description |
|---|---|---|---|
id | string | null | Mandatory. (Corresponding to the helperTextId prop matching <ui-textfield>) |
visible | boolean | false | Makes the helper text permanently visible. |
withCounter | boolean | false | Show character counter. (The maxlength prop of <ui-textfield> is required) |
validMsg | string, boolean | false | Indicates the helper text is a validation message. |
NOTE: Do not insert any tags between
<ui-textfield>and<ui-textfield-helper>with counter
<!-- Single line text field -->\n<ui-form-field>\n <ui-textfield maxlength="40"></ui-textfield>\n <ui-textfield-helper with-counter></ui-textfield-helper>\n</ui-form-field>\n\n<!-- Single line text field with an internal character counter -->\n<ui-form-field>\n <ui-textfield maxlength="40" with-counter></ui-textfield>\n</ui-form-field>\n| Name | Props | Description |
|---|---|---|
default | The default slot holds the text field helper text and can contain HTML. |
<ui-textfield-icon><!-- the material design icon name --></ui-textfield-icon>\n| Name | Type | Default | Description |
|---|---|---|---|
trailing | boolean | false | Display trailing icon. |
unclickable | boolean | false | Display un-clickable icon. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the text field icon and can contain HTML. See Material Icons list. |
| Name | Type | Description |
|---|---|---|
click | function(event: object) | Emits when the text field icon is clicked. |
<ui-textfield><!-- the label text --></ui-textfield>\n<ui-textfield> Types
0: 'filled'1: 'outlined'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | Mandatory. Text field types. |
outlined | boolean | false | Styles the text field as an outlined text field. (label or placeholder required) |
modelValue (v-model) | string, number | '' | Mandatory. |
inputType | string | 'text' | Native <input> types: text, number, password, etc. |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label>. |
label | string | '' | A text caption or description for the text field, which use the input's placeholder attribute instead. |
placeholder | string | null | The placeholder attribute of the <input>. |
disabled | boolean | false | Styles the text field as a disabled text field. |
required | boolean | false | Styles the text field as a required text field. |
fullwidth | boolean | false | Styles the text field as a full width text field. |
endAligned | boolean | false | Styles the text field with an end-aligned input. |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. |
withLeadingIcon | boolean | false | Styles the text field as a text field with a leading icon. |
withTrailingIcon | boolean | false | Styles the text field as a text field with a trailing icon. |
prefixText | string | '' | Sets the text content of the prefix. |
suffixText | string | '' | Sets the text content of the suffix. |
withCounter | boolean | false | Styles the text area as a text area with an internal character counter. |
helperTextId | string | null | Required for the id attribute of the <ui-textfield-helper>. |
attrs | object | {} | Other attributes for <input> or <textarea>. |
NOTE:
withLeadingIconandwithTrailingIconare only used for (non<ui-textfield-icon>) custom leading/trailing icons, and generally do not need to be configured.
In addition to the above, the following properties proxy to the input or textarea elements' properties of the same name:
patternminlengthmaxlength: Required for character counterminmaxsteprowscols| Name | Props | Description |
|---|---|---|
default | The default slot holds the label for the text field. | |
before | iconClass | The before slot holds a custom leading icon. |
after | iconClass | The before slot holds a custom trailing icon. |
| Name | Type | Description |
|---|---|---|
focus | function(event: object) | Emits when the text field is focused. |
keydown | function(event: object) | Emits when a key is pressed in the text field. |
update:modelValue | function(value: string) | Emits when the text field value is changed. |
change | function(event: object) | Emits when a change in the text field value is committed. |
enter | function(value: string) | Emits when the Enter key is pressed in the input. |
blur | function(event: object) | Emits when the text field loses focus. |
NOTE: If you are not using
v-model, you should listen for the text field using@update:modelValueand update themodelValueprop.
Automatic
<ui-textfield v-model="value"></ui-textfield>\nManual
<ui-textfield\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-textfield>\n<ui-form-field>\n <ui-textfield maxlength="20">\n <template #before>\n <ui-textfield-icon>event</ui-textfield-icon>\n </template>\n Floating Label Text\n <template #after>\n <ui-textfield-icon trailing>delete</ui-textfield-icon>\n </template>\n </ui-textfield>\n <ui-textfield-helper with-counter> Helper message </ui-textfield-helper>\n</ui-form-field>\n| Component | Description |
|---|---|
<ui-textfield> | Mandatory. |
<ui-textfield-icon> | Mandatory for leading/trailing icons. |
<ui-textfield-helper> | Styles the container of helper text and character counter elements. |
The Material Design color system can be used to create a color scheme that reflects your brand or style.
'},84086:function(t,e,o){"use strict";o.r(e);e.default='$theme
interface VueInstance {\n $theme: BalmUITheme;\n}\n$theme.primary
$theme.secondary
$theme.background
$theme.surface
$theme.error
$theme.onPrimary
$theme.onSecondary
$theme.onSurface
$theme.onError
interface BalmUITheme {\n primary: string;\n secondary: string;\n background: string;\n surface: string;\n error: string;\n onPrimary: string;\n onSecondary: string;\n onSurface: string;\n onError: string;\n}\n$theme.colors
type ThemeColor = {\n primary?: string;\n secondary?: string;\n background?: string;\n surface?: string;\n error?: string;\n on-primary?: string;\n on-secondary?: string;\n on-surface?: string;\n on-error?: string;\n}\n\ninterface BalmUITheme {\n colors: ThemeColor;\n}\n$theme.getThemeColor(style)
type ThemeColorStyle =\n | 'primary'\n | 'secondary'\n | 'background'\n | 'surface'\n | 'error'\n | 'on-primary'\n | 'on-secondary'\n | 'on-surface'\n | 'on-error';\n\ninterface BalmUITheme {\n getThemeColor(style: ThemeColorStyle): string;\n}\n$theme.getThemeClass(style)
type ThemeClassStyle = ThemeColorStyle | 'primary-bg' | 'secondary-bg';\n\ninterface BalmUITheme {\n getThemeClass(style: ThemeClassStyle): string;\n}\ntype TextStyle = 'primary' | 'secondary' | 'hint' | 'disabled' | 'icon';\n\ntype ThemeTone = 'background' | 'light' | 'dark';\nGet text color/class
interface BalmUITheme {\n getTextColor(style: TextStyle, tone: ThemeTone): string;\n getTextClass(style: TextStyle, tone: ThemeTone): string;\n}\nSet text color
interface BalmUITheme {\n setTextColor(style: TextStyle, value: string): void;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
style | string | '' | Text style name. |
tone | string | 'background' | Theme tone name. |
value | string | '' | Text color value. |
Get text color/class
interface BalmUITheme {\n getTextColorOnLight(style: TextStyle): string;\n getTextClassOnLight(style: TextStyle): string;\n\n getTextColorOnDark(style: TextStyle): string;\n getTextClassOnDark(style: TextStyle): string;\n}\nSet text color
interface BalmUITheme {\n setTextColorOnLight(style: TextStyle, value: string): void;\n setTextColorOnDark(style: TextStyle, value: string): void;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
style | string | '' | Text style name. |
value | string | '' | Text color value. |
$theme without .vue componentimport { useTheme } from 'balm-ui';\n// OR\n// import { useTheme } from 'balm-ui/plugins/theme';\n\nconst $theme = useTheme();\n$toast(message)
$toast(options)
type ToastMessage = string;\n\ninterface ToastOptions {\n className?: string;\n timeoutMs?: number;\n message: ToastMessage;\n position?: 'bottom' | 'center' | 'top';\n}\n\ninterface VueInstance {\n $toast(options: ToastMessage | ToastOptions): Promise<void>;\n}\n| Option | Type | Default | Description | Version |
|---|---|---|---|---|
className | string | '' | The custom class name for the toast. | |
timeoutMs | number | 2750 | The amount of time in milliseconds to show the toast. Value must be between 2000 and 3500 or an error will be thrown. | |
message | string | '' | The text message to display. | |
position | string | 'bottom' | Toast position. | 9.21.0 |
$toast without .vue componentimport { useToast } from 'balm-ui';\n// OR\n// import { useToast } from 'balm-ui/plugins/toast';\n\nconst $toast = useToast();\n$toast('Hello BalmUI');\nTooltips display informative text when users hover over, focus on, or tap an element.
'},5139:function(t,e,o){"use strict";o.r(e);e.default='<ui-tooltip> Types
0: 'plain'
<div aria-describedby="tooltip-id">Text</div>\n<ui-tooltip id="tooltip-id">Tips content</ui-tooltip>\n1: 'rich' (New in 9.18.0)
<ui-tooltip-anchor>\n <div data-tooltip-id="tooltip-id">Text</div>\n <ui-tooltip id="tooltip-id" rich>Tips content</ui-tooltip>\n</ui-tooltip-anchor>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
type | string, number | 0 | Mandatory. Tooltip types. | 9.18.0 |
rich | boolean | false | Optional. Styles a rich tooltip. | 9.18.0 |
width | number | 0 | Custom max width for tooltip. |
| Name | Props | Description |
|---|---|---|
default | The default slot holds the tooltip content and can contain HTML. |
| Name | Props | Description |
|---|---|---|
title | The title slot holds the tooltip title and can contain HTML. | |
default | linkClass | The default slot holds the tooltip content and can contain HTML. |
<div v-tooltip="'plain tips'" aria-describedby="tooltip-id"></div>\nThe top app bar displays information and actions relating to the current screen.
'},13349:function(t,e,o){"use strict";o.r(e);e.default='<ui-top-app-bar><!-- the application title --></ui-top-app-bar>\n<ui-top-app-bar> Types
0: 'standard'1: 'fixed'2: 'dense'3: 'prominent'4: 'prominentDense'5: 'short'6: 'shortCollapsed'-1: 'nonRegular'| Name | Type | Default | Description |
|---|---|---|---|
contentSelector | string | (required) | Selector used to style the content below the top app bar, to prevent the top app bar from covering it. |
type | string, number | 0 | Mandatory. Top app bar types. |
fixed | boolean | false | Fixed top app bars stay at the top of the page and elevate above the content when scrolled. |
dense | boolean | false | The dense top app bar is shorter. |
prominent | boolean | false | The prominent top app bar is taller. |
prominentDense | boolean | false | The prominent top app bar with dense. |
short | boolean | false | Short top app bars are top app bars that can collapse to the navigation icon side when scrolled. |
shortCollapsed | boolean | false | Short top app bars can be configured to always appear collapsed. |
title | string | '' | Application title. |
navIcon | string, boolean | 'menu' | A navigation icon. (Set 'close' for the contextual action bar) |
navId | string | null | Control the navigation drawer is opened or closed. (Please refer to the navId prop of the drawer) |
Short top app bars should be used with no more than 1 action item.
| Name | Props | Description |
|---|---|---|
default | The default slot holds the application title and can contain HTML. | |
nav-icon | navIconClass | The nav-icon slot holds the navigation icon and can contain HTML. |
toolbar | toolbarItemClass | The toolbar slot holds the action items and can contain HTML. |
<template #toolbar="{ toolbarItemClass }">\n <ui-icon-button :class="toolbarItemClass" icon="ICON"></ui-icon-button>\n</template>\n| Name | Type | Description |
|---|---|---|
nav | function() | Emits when the navigation icon is clicked. |
close | function() | Emits when the navigation icon is clicked. Applicable only for Contextual action bar. |
NOTE: If you are not using
navIdof the top app bar andnavIdof the drawer, you should listen for the top app bar using@navand update thev-modelprop of the drawer.
Automatic
<ui-top-app-bar nav-id="demo-menu"></ui-top-app-bar>\n<ui-drawer nav-id="demo-menu" type="modal"></ui-drawer>\nManual
<ui-top-app-bar @nav="balmUI.onChange('open', !open)"></ui-top-app-bar>\n<ui-drawer v-model="open" type="modal"></ui-drawer>\n'},63681:function(t,e,o){"use strict";o.r(e);e.default='New in 9.16.0
<ui-tree></ui-tree>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | string, number, array | '' | Selected node keys. | |
filterParentNode | boolean | false | Selected node keys excludes all parent nodes. | 10.18.0 |
data | array | [] | The tree data source. | |
dataFormat | object | {} | Defines the tree data source format. | |
maxLevel | number | 0 | Set max level for tree nodes. | |
multiple | boolean | false | Whether to support selected multiple tree nodes. | |
singleChecked | boolean | false | Set single checked. Applicable only for the multiple tree. | 9.34.0 |
loadData | function | null | Load data asynchronously. | |
autoExpandParent | boolean | false | Whether to automatically expand root parent(s) treeNode. | 9.17.0 |
autoExpandSelected | boolean | false | Whether to automatically expand selected treeNode and it's parent treeNode. | 10.21.0 |
autoExpandAll | boolean | false | Whether to automatically expand all treeNodes. | 10.21.0 |
defaultExpandedKeys | array | [] | Specify the node keys of the default expanded treeNodes. | 9.17.0 |
Default data format
{\n label: 'label',\n value: 'value', // nodeKey\n children: 'children',\n hasChildren: 'hasChildren',\n isLeaf: 'isLeaf',\n disabled: 'disabled' // New in 9.35.0\n}\nLoad data asynchronously
type TreeNodes = { [key: string]: any }[];\n\ninterface Tree {\n loadData(nodeKey: string | number): TreeNodes;\n}\n| Name | Props | Description | Version |
|---|---|---|---|
default | The default slot holds the tree top bar content and can contain HTML. | ||
expand-more-icon | The custom expand more icon. | ||
expand-less-icon | The custom expand less icon. | ||
before | data | The before slot holds the tree node custom info and can contain HTML. | 9.32.0 |
title | data | The title slot holds the tree node title and can contain HTML. | |
after | data | The after slot holds the tree node custom actions and can contain HTML. |
Rename slot
toactionafterin9.32.0
| Name | Type | Description | Version |
|---|---|---|---|
update:modelValue | function(selectedNodes: string | array, selectedEvent: object) | Emits when tree node is changed. | |
selected | function(selectedNodesData: string | array) | Emits when tree node is selected. | 9.34.0 |
TheselectedEventparameter of@changeevent is new in 9.35.0
NOTE: If you are not using
v-model, you should listen for the tree using@update:modelValueand update themodelValueprop.
Automatic
<ui-tree v-model="selectedNodes"></ui-tree>\nManual
<ui-tree\n :model-value="selectedNodes"\n @update:model-value="balmUI.onChange('selectedNodes', $event)"\n></ui-tree>\nTree node operations (New in 9.31.0)
<ui-tree ref="tree"></ui-tree>\n$refs.tree.updateNode(type: 'create' | 'update' | 'delete', parentKey: string | number, nodeData: object)\n\n$refs.tree.getNode(nodeKey: string): object\nMaterial Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.
'},84963:function(t,e,o){"use strict";o.r(e);e.default='$tt(style)
type TypographyStyle =\n | 'headline1'\n | 'headline2'\n | 'headline3'\n | 'headline4'\n | 'headline5'\n | 'headline6'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'caption'\n | 'button'\n | 'overline'\n | string;\n\ninterface VueInstance {\n $tt(style: TypographyStyle): string;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
style | string | '' | Typography style name or custom style classname. |
The typographic styles in this module are derived from thirteen styles:
| Style | Description |
|---|---|
headline1 | The largest text on the screen, reserved for short, important text or numerals |
headline2 | Headline variant 2 |
headline3 | Headline variant 3 |
headline4 | Headline variant 4 |
headline5 | Headline variant 5 |
headline6 | Headline variant 6 |
subtitle1 | Smaller than headline, reserved for medium-emphasis text that is shorter in length |
subtitle2 | Subtitle variant 2 |
body1 | Used for long-form writing |
body2 | Body variant 2 |
caption | Used sparingly to annotate imagery |
button | A call to action used by different types of buttons |
overline | Used sparingly to introduce a headline |
You can overwrite typography CSS Classes for your project so easy.
$tt without .vue componentimport { useTypography } from 'balm-ui';\n// OR\n// import { useTypography } from 'balm-ui/plugins/typography';\n\nconst $tt = useTypography();\nconsole.log($tt('custom-style-1'));\nDefault Usage
import { types } from 'balm-ui';\nIndividual Usage
import types from 'balm-ui/utils/types';\nMethods
types.getType(any): string;\n\ntypes.isUndefined(value): boolean;\ntypes.isNull(value): boolean;\ntypes.isBoolean(value): boolean;\ntypes.isNumber(value): boolean;\ntypes.isString(value): boolean;\ntypes.isSymbol(value): boolean;\ntypes.isObject(value): boolean;\ntypes.isArray(value): boolean;\ntypes.isFunction(value): boolean;\nDefault Usage
import { helpers } from 'balm-ui';\nIndividual Usage
import helpers from 'balm-ui/utils/helpers';\nMethods
helpers.isEmpty(value): boolean;\n\nhelpers.jsonEqual(jsonA, jsonB): boolean; // The order of the properties IS IMPORTANT\nhelpers.isDeepEqual(obj1, obj2): boolean;\n\nhelpers.merge(target: object, source: object): object;\nhelpers.merge.all(arrayOfObjects: object[]): object;\n\n// New in 9.28.0\nhelpers.toCamelCase(str: string): string;\nhelpers.toCapitalize(str: string): string;\nisEmpty The following values are considered to be empty:undefinednullfalse0'''0'{}[]map or setDefault Usage
import { detectIE } from 'balm-ui';\nIndividual Usage
import detectIE from 'balm-ui/utils/ie';\nMethods
detectIE(): number | false;\nIE browser returns version, other browsers return
false.
New in 10.23.0
Default Usage
import { ban } from 'balm-ui';\nIndividual Usage
import ban from 'balm-ui/utils/ban';\nMethods
ban(): void;\nimport { useValidator } from 'balm-ui';\n// OR\n// import { useValidator } from 'balm-ui/plugins/validator';\n\nconst validator = useValidator();\nValidation Method
interface BalmUIValidator {\n validate(\n formData: { [fieldName: string]: any },\n customFieldset?: string[]\n ): BalmUIValidationResult;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
formData | object | {} | Mandatory. A form data object. |
customFieldset | array | [] | Optional. The field names of the validations. |
Validation Result
interface BalmUIValidationResult {\n valid: boolean;\n validFields: string[];\n invalidFields: string[];\n message: string;\n messages: string[];\n validMsg: { [fieldName: string]: string };\n}\n| Result | Type | Description |
|---|---|---|
valid | boolean | The validator result. |
validFields | array | Valid fields. |
invalidFields | array | Invalid fields. |
message | string | The message of the first invalid field. |
messages | array | The messages of all invalid fields. |
validMsg | object | The messages as an object. (Same format as formData) |
NOTE:
validMsgcan be used with<ui-textfield-helper>/<ui-select-helper>to trigger the<ui-textfield>/<ui-select>invalid styling
Validation Rule
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\u26a0\ufe0f
<script setup>is not supported
// Custom local validation rules\nconst validations = [\n {\n key: 'fieldName1',\n label: 'Field Label',\n validator: 'required, customRule1',\n customRule1: {\n validate(fieldValue, formData) {\n // Validation method\n return true;\n },\n message: '%s is required' // The '%s' symbol will automatically replace the label text\n }\n // More custom rules\n // customRule2: { ... }\n }\n // More form fields\n // {\n // key: 'fieldName2',\n // validator: 'required'\n // }\n];\nComposition API
import { reactive, toRefs } from 'vue';\nimport { useValidator } from 'balm-ui';\n\n// const validations = [...]\n\nconst state = reactive({\n formData: {\n fieldName1: '',\n fieldName2: ''\n }\n});\n\nexport default {\n setup() {\n const validator = useValidator();\n\n function onSubmit() {\n const {\n valid,\n validFields,\n invalidFields,\n message,\n messages,\n validMsg\n } = validator.validate(state.formData);\n }\n\n return {\n validations,\n ...toRefs(state),\n onSubmit\n };\n }\n};\nOptions API
import { useValidator } from 'balm-ui';\n\n// const validations = [...]\n\nexport default {\n data() {\n return {\n validator: useValidator(),\n validations,\n formData: {\n fieldName1: '',\n fieldName2: ''\n }\n };\n },\n methods: {\n onSubmit() {\n const {\n valid,\n validFields,\n invalidFields,\n message,\n messages,\n validMsg\n } = this.validator.validate(this.formData);\n }\n }\n};\n// New in 9.15.0\ninterface BalmUIValidator {\n clear(): void;\n get(fieldName?: string): BalmUIValidationRule[] | BalmUIValidationRule; // show current validation rule(s)\n set(fieldName: string, validationRule: BalmUIValidationRule): void;\n set(validations: BalmUIValidationRule[]): void;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
fieldName | string | '' | A field name of the formdata. (BalmUI validator rule key) |
validation | object | {} | A validation. (BalmUI validator rule value) |
validations | object | [] | (See) BalmUI validator rules. |
computedimport { useValidator } from 'balm-ui';\n\nexport default {\n data() {\n return {\n validator: useValidator(),\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n computed: {\n validations() {\n return this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n }\n },\n methods: {\n onSubmit() {\n let result = this.validator.validate(this.formData);\n // ...\n }\n }\n};\ncustomFieldsetimport { useValidator } from 'balm-ui';\n\nconst validations = [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n];\n\nexport default {\n data() {\n return {\n validator: useValidator(),\n validations,\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n methods: {\n onSubmit() {\n let customFieldset = this.step === 1 ? ['username'] : ['password'];\n let result = this.validator.validate(this.formData, customFieldset);\n // ...\n }\n }\n};\nvalidator.set for validationsimport { useValidator } from 'balm-ui';\n\nexport default {\n data() {\n return {\n validator: useValidator(),\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n }\n },\n methods: {\n onSubmit() {\n let customValidations =\n this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n this.validator.set(customValidations);\n\n let result = this.validator.validate(this.formData);\n // ...\n }\n};\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `$alert` options.\n $alert: {\n // some options\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport $alert from 'balm-ui/plugins/alert';\n\n// `app`: Vue app\n// Optional. Overwrite `$alert` options.\napp.use($alert, {\n // some options\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui/dist/balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI);\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/alert/alert';\n@use 'balm-ui/components/icon/icon';\nimport UiAlert from 'balm-ui/components/alert';\n\n// `app`: Vue app\napp.use(UiAlert);\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\n// `app`: Vue app\napp.use(BalmUIPlus);\nimport vAnchor from 'balm-ui/directives/anchor';\n\n// `app`: Vue app\napp.directive(vAnchor.name, vAnchor);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-autocomplete>` props with default value.\n UiAutocomplete: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/autocomplete/autocomplete';\n@use 'balm-ui/components/menu/menu';\n@use 'balm-ui/components/list/list';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiAutocomplete from 'balm-ui/components/autocomplete';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-autocomplete>` props with default value.\napp.use(UiAutocomplete, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI);\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/badge/badge';\n@use 'balm-ui/components/icon/icon'; // Recommended\nimport UiBadge from 'balm-ui/components/badge';\nimport vBadge from 'balm-ui/directives/badge'; // Optional\n\n// `app`: Vue app\napp.use(UiBadge);\napp.directive(vBadge.name, vBadge); // Optional\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-banner>` props with default value.\n UiBanner: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/banner/banner';\nimport UiBanner from 'balm-ui/components/banner';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-banner>` props with default value.\napp.use(UiBanner, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/bottom-sheet/bottom-sheet';\nimport Vue from 'vue';\nimport UiBottomSheet from 'balm-ui/components/bottom-sheet';\n\nVue.use(UiBottomSheet);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-button>` props with default value.\n UiButton: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiButton from 'balm-ui/components/button';\nimport vButton from 'balm-ui/directives/button'; // Optional\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-button>` props with default value.\napp.use(UiButton, {\n // some props\n});\nVue.directive(vButton.name, vButton); // Optional\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-card>` props with default value.\n UiCard: {\n // some props\n },\n // Optional. Overwrite `<ui-card-media>` props with default value.\n UiCardMedia: {\n // some props\n },\n // Optional. Overwrite `<ui-card-actions>` props with default value.\n UiCardActions: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/card/card';\nimport UiCardComponents from 'balm-ui/components/card';\n\n// `app`: Vue app\napp.use(UiCardComponents, {\n // Optional. Overwrite `<ui-card>` props with default value.\n UiCard: {\n // some props\n },\n // Optional. Overwrite `<ui-card-media>` props with default value.\n UiCardMedia: {\n // some props\n },\n // Optional. Overwrite `<ui-card-actions>` props with default value.\n UiCardActions: {\n // some props\n }\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-checkbox>` props with default value.\n UiCheckbox: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/form-field/form-field';\n@use 'balm-ui/components/checkbox/checkbox';\nimport UiFormField from 'balm-ui/components/form-field';\nimport UiCheckbox from 'balm-ui/components/checkbox';\n\n// `app`: Vue app\napp.use(UiFormField);\n// Optional. Overwrite `<ui-checkbox>` props with default value.\napp.use(UiCheckbox, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-chips>` props with default value.\n UiChips: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/chips/chips';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiChipsComponents from 'balm-ui/components/chips';\n\n// `app`: Vue app\napp.use(UiChipsComponents, {\n // Optional. Overwrite `<ui-chips>` props with default value.\n UiChips: {\n // some props\n }\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI);\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/collapse/collapse';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiCollapse from 'balm-ui/components/collapse';\n\n// `app`: Vue app\napp.use(UiCollapse);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `$confirm` options.\n $confirm: {\n // some options\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/confirm/confirm';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport $confirm from 'balm-ui/plugins/confirm';\n\n// `app`: Vue app\n// Optional. Overwrite `$confirm` options.\napp.use($confirm, {\n // some options\n});\nimport Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\nimport Vue from 'vue';\nimport vCopy from 'balm-ui/directives/copy';\n\nVue.directive(vCopy.name, vCopy);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-datepicker>` props with default value.\n UiDatepicker: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/picker/picker';\n@use 'balm-ui/components/datepicker/datepicker';\nimport UiDatepicker from 'balm-ui/components/datepicker';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-datepicker>` props with default value.\napp.use(UiDatepicker, {\n // some props\n});\nimport Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\nimport Vue from 'vue';\nimport vDebounce from 'balm-ui/directives/debounce';\n\nVue.directive(vDebounce.name, vDebounce);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-dialog>` props with default value.\n UiDialog: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-title>` props with default value.\n UiDialogTitle: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-actions>` props with default value.\n UiDialogActions: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/components/icon/icon'; // for close icon button\nimport UiDialogComponents from 'balm-ui/components/dialog';\n\n// `app`: Vue app\napp.use(UiDialogComponents, {\n // Optional. Overwrite `<ui-dialog>` props with default value.\n UiDialog: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-title>` props with default value.\n UiDialogTitle: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-actions>` props with default value.\n UiDialogActions: {\n // some props\n }\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui/dist/balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI);\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/divider/divider';\nimport UiDivider from 'balm-ui/components/divider';\n\n// `app`: Vue app\napp.use(UiDivider);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI);\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/drawer/drawer';\n@use 'balm-ui/components/list/list';\nimport UiDrawerComponents from 'balm-ui/components/drawer';\nimport UiListComponents from 'balm-ui/components/list';\n\n// `app`: Vue app\napp.use(UiDrawerComponents);\napp.use(UiListComponents);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\n// `app`: Vue app\napp.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-editor>` props with default value.\n UiEditor: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/editor/editor';\n@use 'balm-ui/components/icon/icon';\n\n// Choose one editor theme\n@use 'balm-ui/components/editor/theme/snow';\n@use 'balm-ui/components/editor/theme/bubble';\nimport UiEditor from 'balm-ui/components/editor';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-editor>` props with default value.\napp.use(UiEditor, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI);\n/* Included `elevation.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/directives/elevation/elevation';\nimport vElevation from 'balm-ui/directives/elevation';\n\n// `app`: Vue app\napp.directive(vElevation.name, vElevation);\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI);\nimport $event from 'balm-ui/plugins/event';\n\n// `app`: Vue app\napp.use($event);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-fab>` props with default value.\n UiFab: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/fab/fab';\n@use 'balm-ui/components/icon/icon'; // Recommended\nimport UiFab from 'balm-ui/components/fab';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-fab>` props with default value.\napp.use(UiFab, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-file>` props with default value.\n UiFile: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/file/file';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiFile from 'balm-ui/components/file';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-file>` props with default value.\napp.use(UiFile, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI);\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/form-field/form-field'; // NOTE: It must be loaded before form styles\n@use 'balm-ui/components/form/form';\nimport UiForm from 'balm-ui/components/form';\nimport UiFormField from 'balm-ui/components/form-field';\n\n// `app`: Vue app\napp.use(UiForm);\napp.use(UiFormField);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-grid>` props with default value.\n UiGrid: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/grid/grid';\nimport UiGridComponents from 'balm-ui/components/grid';\nimport $grid from 'balm-ui/plugins/grid'; // Optional\n\n// `app`: Vue app\napp.use(UiGridComponents, {\n // Optional. Overwrite `<ui-grid>` props with default value.\n UiGrid: {\n // some props\n }\n});\napp.use($grid); // Optional\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-icon-button>` props with default value.\n UiIconButton: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/icon-button/icon-button';\n@use 'balm-ui/components/icon/icon';\nimport UiIconButton from 'balm-ui/components/icon-button';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-icon-button>` props with default value.\napp.use(UiIconButton, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-icon>` props with default value.\n UiIcon: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/icon/icon';\nimport UiIcon from 'balm-ui/components/icon';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-icon>` props with default value.\napp.use(UiIcon, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-image-list>` props with default value.\n UiImageList: {\n // some props\n },\n // Optional. Overwrite `<ui-image-item>` props with default value.\n UiImageItem: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/image-list/image-list';\nimport UiImageListComponents from 'balm-ui/components/image-list';\n\n// `app`: Vue app\napp.use(UiImageListComponents, {\n // Optional. Overwrite `<ui-image-list>` props with default value.\n UiImageList: {\n // some props\n },\n // Optional. Overwrite `<ui-image-item>` props with default value.\n UiImageItem: {\n // some props\n }\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-list>` props with default value.\n UiList: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/list/list';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiListComponents from 'balm-ui/components/list';\n\n// `app`: Vue app\napp.use(UiListComponents, {\n // Optional. Overwrite `<ui-list>` props with default value.\n UiList: {\n // some props\n }\n});\nimport Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\nimport Vue from 'vue';\nimport vLongpress from 'balm-ui/directives/longpress';\n\nVue.directive(vLongpress.name, vLongpress);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-menu>` props with default value.\n UiMenu: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/menu/menu';\n@use 'balm-ui/components/list/list';\nimport UiMenuComponents from 'balm-ui/components/menu';\n\n// `app`: Vue app\napp.use(UiMenuComponents, {\n // Optional. Overwrite `<ui-menu>` props with default value.\n UiMenu: {\n // some props\n }\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\n// `app`: Vue app\napp.use(BalmUI);\napp.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-navigation-bar>` props with default value.\n UiNavigationBar: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/navigation-bar/navigation-bar';\n@use 'balm-ui/components/tabs/tabs';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiNavigationBar from 'balm-ui/components/navigation-bar';\nimport UiTabsComponents from 'balm-ui/components/tabs';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-navigation-bar>` props with default value.\napp.use(UiNavigationBar, {\n // some props\n});\napp.use(UiTabsComponents);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-pagination>` props with default value.\n UiPagination: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/table/table';\n@use 'balm-ui/components/pagination/pagination';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\nimport UiPagination from 'balm-ui/components/pagination';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-pagination>` props with default value.\napp.use(UiPagination, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-progress>` props with default value.\n UiProgress: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/progress/progress';\nimport UiProgress from 'balm-ui/components/progress';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-progress>` props with default value.\napp.use(UiProgress, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-radio>` props with default value.\n UiRadio: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/form-field/form-field';\n@use 'balm-ui/components/radio/radio';\nimport UiFormField from 'balm-ui/components/form-field';\nimport UiRadio from 'balm-ui/components/radio';\n\n// `app`: Vue app\napp.use(UiFormField);\n// Optional. Overwrite `<ui-radio>` props with default value.\napp.use(UiRadio, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-rangepicker>` props with default value.\n UiRangepicker: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/picker/picker';\n@use 'balm-ui/components/datepicker/datepicker';\n@use 'balm-ui/components/rangepicker/rangepicker';\nimport UiRangepicker from 'balm-ui/components/rangepicker';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-rangepicker>` props with default value.\napp.use(UiRangepicker, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI);\n/* Included `ripple.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/directives/ripple/ripple';\nimport vRipple from 'balm-ui/directives/ripple';\n\n// `app`: Vue app\napp.directive(vRipple.name, vRipple);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-segmented-buttons>` props with default value.\n UiSegmentedButtons: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/segmented-button/segmented-button';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiSegmentedButtonComponents from 'balm-ui/components/segmented-button';\n\n// `app`: Vue app\napp.use(UiSegmentedButtonComponents, {\n // Optional. Overwrite `<ui-segmented-buttons>` props with default value.\n UiSegmentedButtons: {\n // some props\n }\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-select>` props with default value.\n UiSelect: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/select/select';\n@use 'balm-ui/components/menu/menu';\n@use 'balm-ui/components/list/list';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiSelect from 'balm-ui/components/select';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-select>` props with default value.\napp.use(UiSelect, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI);\n@use 'balm-ui/directives/shape/shape';\nimport vShape from 'balm-ui/directives/shape';\n\n// `app`: Vue app\napp.directive(vShape.name, vShape);\n@use 'balm-ui/dist/balm-ui';\nimport Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/side-sheet/side-sheet';\nimport Vue from 'vue';\nimport UiSideSheet from 'balm-ui/components/side-sheet';\n\nVue.use(UiSideSheet);\n@use 'balm-ui/dist/balm-ui';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\n// `app`: Vue app\napp.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-skeleton>` props with default value.\n UiSkeleton: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/skeleton/skeleton';\nimport UiSkeleton from 'balm-ui/components/skeleton';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-skeleton>` props with default value.\napp.use(UiSkeleton, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-slider>` props with default value.\n UiSlider: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/slider/slider';\nimport UiSlider from 'balm-ui/components/slider';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-slider>` props with default value.\napp.use(UiSlider, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-snackbar>` props with default value.\n UiSnackbar: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/snackbar/snackbar';\nimport UiSnackbar from 'balm-ui/components/snackbar';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-snackbar>` props with default value.\napp.use(UiSnackbar, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-spinner>` props with default value.\n UiSpinner: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/spinner/spinner';\nimport UiSpinner from 'balm-ui/components/spinner';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-spinner>` props with default value.\napp.use(UiSpinner, {\n // some props\n});\nimport BalmUI from 'balm-ui';\nimport myStore from './store';\n\n// `app`: Vue app\napp.use(BalmUI, {\n $store: myStore\n});\nimport $store from 'balm-ui/plugins/store';\nimport myStore from './store';\n\n// `app`: Vue app\napp.use($store, myStore);\nCustom global store
// `/path/to/app/scripts/store/index.js`\nexport default {};\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-switch>` props with default value.\n UiSwitch: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/switch/switch';\nimport UiSwitch from 'balm-ui/components/switch';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-switch>` props with default value.\napp.use(UiSwitch, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-table>` props with default value.\n UiTable: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/table/table';\n@use 'balm-ui/components/checkbox/checkbox'; // Required only for data table with row selection\n@use 'balm-ui/components/icon-button/icon-button'; // Required only for data table with column sorting\n@use 'balm-ui/components/pagination/pagination'; // Recommended\n@use 'balm-ui/components/icon/icon';\nimport UiTable from 'balm-ui/components/table';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-table>` props with default value.\napp.use(UiTable, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-tabs>` props with default value.\n UiTabs: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/tabs/tabs';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiTabsComponents from 'balm-ui/components/tabs';\n\n// `app`: Vue app\napp.use(UiTabsComponents, {\n // Optional. Overwrite `<ui-tabs>` props with default value.\n UiTabs: {\n // some props\n }\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-textfield>` props with default value.\n UiTextfield: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/icon/icon'; // Optional\nimport UiTextfieldComponents from 'balm-ui/components/textfield';\n\n// `app`: Vue app\napp.use(UiTextfieldComponents, {\n // Optional. Overwrite `<ui-textfield>` props with default value.\n UiTextfield: {\n // some props\n }\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n $theme: {\n // (Optional) New in 9.28.0, See ThemeColor type in APIs.\n }\n});\n/* Included `theme.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/plugins/theme/theme';\nimport $theme from 'balm-ui/plugins/theme';\n\n// `app`: Vue app\napp.use($theme, {\n // (Optional) New in 9.28.0, See ThemeColor type in APIs.\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `$toast` options.\n $toast: {\n // some options\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/snackbar/snackbar';\n@use 'balm-ui/plugins/toast/toast'; // New in 9.20.0\nimport $toast from 'balm-ui/plugins/toast';\n\n// `app`: Vue app\n// Optional. Overwrite `$toast` options.\napp.use($toast, {\n // some options\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-tooltip>` props with default value.\n UiTooltip: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/tooltip/tooltip';\nimport UiTooltip from 'balm-ui/components/tooltip';\nimport vTooltip from 'balm-ui/directives/tooltip'; // Optional\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-tooltip>` props with default value.\napp.use(UiTooltip, {\n // some props\n});\napp.directive(vTooltip.name, vTooltip); // Optional\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite `<ui-top-app-bar>` props with default value.\n UiTopAppBar: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/top-app-bar/top-app-bar';\n@use 'balm-ui/components/icon-button/icon-button';\n@use 'balm-ui/components/icon/icon';\nimport UiTopAppBar from 'balm-ui/components/top-app-bar';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-top-app-bar>` props with default value.\napp.use(UiTopAppBar, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\n// `app`: Vue app\napp.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-tree>` props with default value.\n UiTree: {\n // some props\n }\n});\n@use 'balm-ui/components/core';\n@use 'balm-ui/components/tree/tree';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/checkbox/checkbox'; // Optional\nimport UiTree from 'balm-ui/components/tree';\n\n// `app`: Vue app\n// Optional. Overwrite `<ui-tree>` props with default value.\napp.use(UiTree, {\n // some props\n});\n@use 'balm-ui/dist/balm-ui';\nimport BalmUI from 'balm-ui';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Overwrite the param of `$tt()`.\n $typography: ['custom-style-1', 'custom-style-2']\n});\n/* Included `typography.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/plugins/typography/typography';\nimport $typography from 'balm-ui/plugins/typography';\n\n// `app`: Vue app\n// Optional. Overwrite the param of `$tt()`.\napp.use($typography, ['custom-style-1', 'custom-style-2']);\nNOTE: You can customize the style for your scale classname (mdc-typography--<STYLE>)
.mdc-typography--custom-style-1 {\n // ...\n}\n\n.mdc-typography--custom-style-2 {\n // ...\n}\nimport BalmUI from 'balm-ui';\nimport validatorRules from './config/validator-rules';\n\n// `app`: Vue app\napp.use(BalmUI, {\n // Optional. Set global validation rules.\n $validator: validatorRules\n});\nimport $validator from 'balm-ui/plugins/validator';\nimport validatorRules from './config/validator-rules';\n\n// `app`: Vue app\n// Optional. Set global validation rules.\napp.use($validator, validatorRules);\nSet global validation rules
import { helpers } from 'balm-ui'; // Default Usage\n// OR\n// import helpers from 'balm-ui/utils/helpers'; // ### Individual Usage\n\nexport default {\n required: {\n validate(value) {\n return !helpers.isEmpty(value);\n },\n message: '%s is required'\n },\n mobile: {\n validate(value) {\n return /^1[0-9]\\d{9}$/.test(value);\n },\n message: 'Invalid phone number'\n },\n password: {\n validate(value) {\n return /^\\w+$/.test(value);\n },\n message: '%s must be a letter, digit or underline'\n }\n};\n$alert(message)
$alert(options)
interface VueInstance {\n $alert(options: string | object): Promise<void>;\n}\n| Option | Type | Default | Description |
|---|---|---|---|
className | string | '' | \u81ea\u5b9a\u4e49\u8b66\u544a\u6846\u7684 class |
title | string | '' | \u8bbe\u7f6e\u8b66\u544a\u6846\u7684\u6807\u9898 |
state | string | '' | \u8b66\u544a\u6846\u72b6\u6001\u56fe\u6807\u7c7b\u578b |
stateOutlined | boolean | false | \u663e\u793a\u8f6e\u5ed3\u72b6\u6001\u56fe\u6807 |
message | string | '' | \u8bbe\u7f6e\u8b66\u544a\u6846\u7684\u5185\u5bb9 |
raw | boolean | false | \u6e32\u67d3 HTML |
buttonText | string | 'OK' | \u6309\u94ae\u6587\u672c |
callback | function | false | \u70b9\u51fb\u786e\u5b9a\u6309\u94ae\u540e\u7684\u4e8b\u4ef6\u5904\u7406 |
interface AlertDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n\u7528\u6cd5 1
$alert({\n message,\n callback() {\n // ...\n }\n});\n\u7528\u6cd5 2\uff08\u63a8\u8350\uff09
$alert(message).then(() => {\n // ...\n});\n.vue \u7ec4\u4ef6\u4e2d\u4f7f\u7528 $alertimport { useAlert } from 'balm-ui';\n// \u6216\n// import { useAlert } from 'balm-ui/plugins/alert';\n\nconst $alert = useAlert();\n$alert('Hello BalmUI');\n<ui-alert><!-- message --></ui-alert>\n| Name | Type | Default | Description |
|---|---|---|---|
state | string | '' | \u72b6\u6001\u56fe\u6807\u7c7b\u578b |
stateOutlined | boolean | false | \u663e\u793a\u8f6e\u5ed3\u72b6\u6001\u56fe\u6807 |
closable | boolean | false | \u662f\u5426\u53ef\u5173\u95ed |
interface Alert {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6d88\u606f\u5185\u5bb9\u53ca HTML |
\u901a\u8fc7\u5c11\u91cf\u53ef\u7528\u548c\u7075\u6d3b\u7684\u8b66\u62a5\u6d88\u606f\uff0c\u4e3a\u5178\u578b\u7684\u7528\u6237\u64cd\u4f5c\u63d0\u4f9b\u4e0a\u4e0b\u6587\u53cd\u9988\u6d88\u606f\u3002
'},42819:function(t,e,o){"use strict";o.r(e);e.default='<div v-anchor></div>\nv-anchor.bodyElement: \u81ea\u5b9a\u4e49 HTML \u5bb9\u5668\uff08\u9ed8\u8ba4\u5bb9\u5668\u4e3a <html>\uff09v-anchor.html: \u542f\u7528 HTML \u951a\u70b9\uff08\u4f8b\u5982 markdown\uff09v-anchor.offset="offsetValue": \u4e3a\u9875\u9762\u6eda\u52a8\u8bbe\u7f6e\u504f\u79fb\u91cf\uff08\u5728 <html> \u6216\u81ea\u5b9a\u4e49\u5bb9\u5668\u4e0a\u4f7f\u7528 data-vanchor-offset \u5c5e\u6027\u8bbe\u7f6e\u5168\u5c40\u504f\u79fb\u91cf\uff09offsetValue \u503c\u4e3a\u6570\u5b57
<html data-vanchor-offset="64">\n <!-- Anchors & Targets -->\n</html>\n\n<!-- \u6216 -->\n\n<div class="container" v-anchor.offset="64">\n <!-- Anchors & Targets -->\n</div>\nv-anchor:hrefv-anchor:id<div v-anchor:href="'#target1'">Anchor 1</div>\n<div v-anchor:href="'#target2'">Anchor 2</div>\n\n<div v-anchor:id="'target1'">Target 1</div>\n<div v-anchor:id="'target2'">Target 2</div>\nclass="v-anchor" data-href="selector"id \u6216\u552f\u4e00\u7684 class<div v-anchor.html>\n <div class="v-anchor" data-href="#target1">Anchor 1</div>\n <div class="v-anchor" data-href="#target2">Anchor 2</div>\n\n <div id="target1">Target 3</div>\n <div id="target2">Target 4</div>\n</div>\n<ui-autocomplete></ui-autocomplete>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder\uff09 | |
modelValue (v-model) | string, number | '' | \u6587\u672c\u6846\u503c | |
source | array | [] | \u8bbe\u7f6e\u6570\u636e\u6e90 | |
sourceFormat | object | { label: 'label', value: 'value' } | \u8bbe\u7f6e\u6570\u636e\u6e90\u683c\u5f0f | 9.3.0 |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 | |
label | string | '' | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff | |
placeholder | string | null | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837\u5f0f | |
autofocus | boolean | false | \u81ea\u52a8\u9009\u4e2d\u5efa\u8bae\u83dc\u5355\u4e2d\u7684\u7b2c\u4e00\u9879 | |
delay | number | 300 | \u89e6\u53d1\u952e\u76d8\u548c\u6267\u884c\u641c\u7d22\u4e4b\u95f4\u7684\u5ef6\u8fdf\uff08\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\uff09\u3002\u96f6\u5ef6\u8fdf\u5bf9\u672c\u5730\u6570\u636e\u6709\u610f\u4e49\uff08\u54cd\u5e94\u901f\u5ea6\u66f4\u5feb\uff09\uff0c\u4f46\u5728\u54cd\u5e94\u901f\u5ea6\u8f83\u6162\u7684\u60c5\u51b5\u4e0b\uff0c\u53ef\u4ee5\u4e3a\u8fdc\u7a0b\u6570\u636e\u4ea7\u751f\u5927\u91cf\u8d1f\u8f7d\u3002 | |
minlength | number | 1 | \u6a21\u7cca\u641c\u7d22\u7684\u6700\u5c11\u5b57\u7b26\u6570\u3002\u96f6\u5bf9\u4e8e\u4ec5\u5305\u542b\u5c11\u91cf\u9879\u76ee\u7684\u672c\u5730\u6570\u636e\u5f88\u6709\u7528\uff0c\u4f46\u662f\u5f53\u5355\u4e2a\u5b57\u7b26\u641c\u7d22\u53ef\u4ee5\u5339\u914d\u6570\u5343\u4e2a\u9879\u76ee\u65f6\uff0c\u5e94\u4f7f\u7528\u66f4\u9ad8\u7684\u503c\u3002 | |
remote | boolean | false | \u542f\u7528\u8fdc\u7a0b\u83b7\u53d6\u6570\u636e\u3002\u9ed8\u8ba4\u7528\u6cd5\u4e3a\u672c\u5730\u6570\u636e\u3002 | |
highlight | boolean | false | \u5c06\u81ea\u52a8\u5b8c\u6210\u6587\u672c\u6846\u5efa\u8bae\u503c\u8bbe\u7f6e\u4e3a\u52a0\u7c97 | 9.3.0 |
filterKeywords | boolean | false | \u542f\u7528\u8fc7\u6ee4\u5173\u952e\u5b57 | 10.11.0 |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
endAligned | boolean | false | \u8f93\u5165\u6587\u672c\u53f3\u5bf9\u9f50 | |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 | |
withLeadingIcon | boolean | false | \u542f\u7528\u9996\u56fe\u6807\u6837\uff08\u9700\u4f7f\u7528 before \u63d2\u69fd\uff09 | |
withTrailingIcon | boolean | false | \u542f\u7528\u5c3e\u56fe\u6807\u6837\u5f0f\uff08\u9700\u4f7f\u7528 after \u63d2\u69fd\uff09 | |
inside | boolean | false | \u9002\u914d\u6837\u5f0f\uff0c\u53ef\u7528\u4e8e\u67d0\u4e9b\u7ec4\u4ef6\u5185\u90e8\u7684\u6ea2\u51fa (\u5982\uff1a\u7528\u5728 <ui-dialog> \u4e2d) | 10.10.0 |
source \u5c5e\u6027\u3002\u652f\u6301\u4e24\u79cd\u683c\u5f0f\u5316\uff1a[ 'Choice1', 'Choice2' ]label \u548c value \u5b57\u6bb5\uff09\uff1a[ { label: 'Choice1', value: 'value1' }, ... ]\u4f60\u9875\u53ef\u4ee5\u901a\u8fc7
sourceFormat\u5c5e\u6027\u81ea\u5b9a\u4e49\u539f\u6570\u636e\u7684\u683c\u5f0f
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: string|number) | \u6587\u672c\u6846\u4e2d\u8f93\u5165\u5185\u5bb9\u65f6\u89e6\u53d1 |
search | function(keywords: string) | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u89e6\u53d1\u3002\u4ec5\u7528\u4e8e\u542f\u7528 remote \u7684\u81ea\u52a8\u5b8c\u6210\u6587\u672c\u6846\u3002 |
selected | function(item: object) | \u81ea\u52a8\u5b8c\u6210\u5efa\u8bae\u503c\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 |
selected \u4e8b\u60c5\u8fd4\u56de\u503c\uff1a
{\n label: 'Choice 1',\n value: 'value 1',\n // more custom fields\n}\n\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u81ea\u52a8\u5b8c\u6210\u6587\u672c\u6846\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-autocomplete v-model="value"></ui-autocomplete>\n\u624b\u52a8
<ui-autocomplete\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-autocomplete>\n<ui-badge></ui-badge>\n| Name | Type | Default | Description |
|---|---|---|---|
count | number | 0 | \u5fbd\u7ae0\u4e2d\u663e\u793a\u7684\u6570\u5b57 |
overlap | boolean | false | \u4f7f\u5fbd\u7ae0\u4e0e\u5176\u5bb9\u5668\u91cd\u53e0 |
maxCount | number | 99 | \u53ef\u663e\u793a\u7684\u6700\u5927\u6570 |
dot | boolean | false | \u4f7f\u7528\u5c0f\u5706\u70b9\u4ee3\u66ff\u6570\u5b57\u663e\u793a |
state | string | '' | \u5fbd\u7ae0\u7684\u72b6\u6001\u7c7b\u578b |
interface Badge {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5fbd\u7ae0\u6587\u5b57\u5185\u5bb9\u53ca HTML | |
badge | \u81ea\u5b9a\u4e49\u5fbd\u7ae0\u5185\u5bb9 |
\u5c0f\u6570\u503c\u6216\u72b6\u6001\u7684\u63cf\u8ff0\u7b26\u3002
'},33390:function(t,e,o){"use strict";o.r(e);e.default='<div v-badge></div>\nv-badge="count"v-badge.overlap="count"v-badge.dot| Value | Type | Default | Description |
|---|---|---|---|
count | number | 0 | \u5fbd\u7ae0\u4e2d\u663e\u793a\u7684\u6570\u5b57 |
'},53359:function(t,e,o){"use strict";o.r(e);e.default='\u53ef\u663e\u793a\u7684\u6700\u5927\u6570\uff1a
99
<ui-banner><!-- the banner message --></ui-banner>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | boolean | false | \u6a2a\u5e45\u663e\u793a\u72b6\u6001 | |
centered | boolean | false | \u5185\u5bb9\u5c45\u4e2d\u663e\u793a\u3002\u9ed8\u8ba4\u5c45\u5de6\u3002 | 9.20.0 |
fixed | boolean | false | \u5728\u9876\u90e8\u5bfc\u822a\u680f\u4e0b\u65b9\u4f7f\u7528\u6a2a\u5e45\u65f6\uff0c\u6a2a\u5e45\u5e94\u56fa\u5b9a\u5728\u5c4f\u5e55\u9876\u90e8\u3002 | 9.20.0 |
withImage | boolean | false | \u56fe\u7247\u53ef\u4ee5\u5e2e\u52a9\u4f20\u8fbe\u6a2a\u5e45\u5e7f\u544a\u7684\u4fe1\u606f\u3002 | 9.20.0 |
mobileStacked | boolean | false | \u5e26\u6709\u957f\u6587\u5b57\u7684\u6a2a\u5e45\u5728\u79fb\u52a8\u89c6\u56fe\u4e2d\uff0c\u5e94\u5c06\u5176\u64cd\u4f5c\u533a\u57df\u653e\u7f6e\u5728\u6587\u5b57\u4e0b\u65b9\uff0c\u800c\u4e0d\u662f\u5e76\u6392\u653e\u7f6e\u3002 | 9.20.0 |
primaryButtonText | boolean | 'OK' | \u4e3b\u6309\u94ae\u6587\u672c | |
secondaryButtonText | boolean | '' | \u8f85\u6309\u94ae\u6587\u672c |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6d88\u606f\u6587\u672c\u53ca HTML | |
image | \u81ea\u5b9a\u4e49\u56fe\u6807\u6216\u56fe\u7247\u533a\u57df | |
actions | \u81ea\u5b9a\u4e49\u52a8\u4f5c\u6309\u94ae |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | \u6a2a\u5e45\u9690\u85cf\u65f6\u89e6\u53d1 |
closed | function(reason: string) | \u6a2a\u5e45\u5173\u95ed\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u6a2a\u5e45\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-banner v-model="open"></ui-banner>\n\u624b\u52a8
<ui-banner\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-banner>\n\u6a2a\u5e45\u663e\u793a\u7a81\u51fa\u7684\u6d88\u606f\u548c\u76f8\u5173\u7684\u53ef\u9009\u64cd\u4f5c\u3002
'},29682:function(t,e,o){"use strict";o.r(e);e.default='<ui-bottom-sheet></ui-bottom-sheet>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean | false | \u5e95\u90e8\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5e95\u90e8\u52a8\u4f5c\u8868\u7684\u5185\u5bb9\u53ca HTML |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | \u5e95\u90e8\u52a8\u4f5c\u8868\u9690\u85cf\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u5e95\u90e8\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-bottom-sheet v-model="open"></ui-bottom-sheet>\n\u624b\u52a8
<ui-bottom-sheet\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-bottom-sheet>\n'},31969:function(t,e,o){"use strict";o.r(e);e.default='New in 9.25.0
<ui-button><!-- the button text label --></ui-button>\n<ui-button> \u7c7b\u578b
0: 'text'1: 'outlined'2: 'raised'3: 'unelevated'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | \u6309\u94ae\u7c7b\u578b |
outlined | boolean | false | \u4f7f\u7528\u8f6e\u5ed3\u6309\u94ae\u6837\u5f0f |
raised | boolean | false | \u4f7f\u7528\u6d6e\u96d5\u6309\u94ae\u6837\u5f0f |
unelevated | boolean | false | \u4f7f\u7528\u6241\u5e73\u6309\u94ae\u6837\u5f0f |
icon | string | '' | \u8bbe\u7f6e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
disabled | boolean | false | \u7981\u7528\u6309\u94ae\u3002\u540c\u539f\u751f <button> \u5c5e\u6027\u3002 |
nativeType | string | 'button' | \u539f\u751f\u6309\u94ae\u7c7b\u578b\u3002 |
interface Button {\n nativeType: 'button' | 'submit' | 'reset';\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u6587\u5b57\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n| Name | Type | Description |
|---|---|---|
click | function(event: object) | \u70b9\u51fb\u6309\u94ae\u65f6\u89e6\u53d1 |
\u6309\u94ae\u4f7f\u7528\u6237\u53ea\u9700\u5355\u51fb\u4e00\u4e0b\u5373\u53ef\u6267\u884c\u64cd\u4f5c\u5e76\u505a\u51fa\u9009\u62e9\u3002
'},1712:function(t,e,o){"use strict";o.r(e);e.default='New in 9.22.0
<a v-button></a>\nv-buttonv-button.outlinedv-button.raisedv-button.unelevated<ui-card-actions><!-- card actions area --></ui-card-actions>\n| Name | Type | Default | Description |
|---|---|---|---|
fullBleed | boolean | false | \u5220\u9664\u64cd\u4f5c\u533a\u57df\u7684\u586b\u5145\uff0c\u5e76\u4f7f\u5176\u64cd\u4f5c\u533a\u57df\u5bbd\u5ea6\u4e3a 100\uff05 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u52a8\u4f5c\u7ec4\u4ef6 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-buttons><ui-card-icons><ui-card-buttons><!-- the button components --></ui-card-buttons>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u7ec4\u4ef6\u53ca HTML |
<ui-card-content>\n <!-- content within actionable area: rich media + additional text content -->\n</ui-card-content>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5185\u5bb9\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-media><ui-card-text><ui-card-icons><!-- the icon button components --></ui-card-icons>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u6807\u6309\u94ae\u7ec4\u4ef6\u53ca HTML |
<ui-card-media-content><!-- rich media content --></ui-card-media-content>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5a92\u4f53\u5185\u5bb9\u53ca HTML |
<ui-card-media>\n <!-- <ui-card-media-content> -->\n</ui-card-media>\n| Name | Type | Default | Description |
|---|---|---|---|
square | boolean | false | \u81ea\u52a8\u7f29\u653e\u5a92\u4f53\u533a\u57df\u7684\u9ad8\u5ea6\u4ee5\u4f7f\u5176\u5bbd\u5ea6\u76f8\u7b49\u3002 |
rectangle | boolean | false | \u6839\u636e\u5176\u5bbd\u5ea6\u81ea\u52a8\u7f29\u653e\u5a92\u4f53\u533a\u57df\u7684\u9ad8\u5ea6\uff0c\u5e76\u4fdd\u6301 16:9 \u7684\u7eb5\u6a2a\u6bd4\u3002 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5a92\u4f53\u5185\u5bb9\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-media-content><ui-card-text><!-- additional text content --></ui-card-text>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u6587\u5b57\u5185\u5bb9\u53ca HTML |
<ui-card><!-- Card contents --></ui-card>\n| Name | Type | Default | Description |
|---|---|---|---|
outlined | boolean | false | \u53bb\u9664\u9634\u5f71\u5e76\u663e\u793a\u7ec6\u7ebf\u8f6e\u5ed3 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-content><ui-card-actions>\u5361\u7247\u5305\u542b\u6709\u5173\u5355\u4e2a\u4e3b\u9898\u7684\u5185\u5bb9\u548c\u52a8\u4f5c\u3002
'},62742:function(t,e,o){"use strict";o.r(e);e.default='<ui-card>\n <ui-card-content>\n <ui-card-media>\n <ui-card-media-content></ui-card-media-content>\n </ui-card-media>\n <ui-card-text></ui-card-text>\n </ui-card-content>\n <ui-card-actions>\n <ui-card-buttons></ui-card-buttons>\n <ui-card-icons></ui-card-icons>\n </ui-card-actions>\n</ui-card>\n| Component | Description |
|---|---|
<ui-card> | \u5361\u7247\u5bb9\u5668\u5143\u7d20 |
<ui-card-content> | \u53ef\u9009\u3002\u5361\u7684\u4e3b\u8981\u53ef\u70b9\u51fb\u533a\u57df\u3002\u901a\u5e38\u5305\u542b\u9664 <ui-card-actions> \u5916\u7684\u5927\u591a\u6570\uff08\u6216\u5168\u90e8\uff09\u5361\u5185\u5bb9\u3002\u4ec5\u9002\u7528\u4e8e\u5177\u6709\u4e3b\u8868\u9762\u5e94\u89e6\u53d1\u7684\u4e3b\u8981\u52a8\u4f5c\u7684\u5361\u3002 |
<ui-card-media> | \u53ef\u9009\u3002\u663e\u793a\u81ea\u5e26 background-size\uff1acover \u5c5e\u6027\u7684\u81ea\u5b9a\u4e49 background-image \u7684\u5a92\u4f53\u533a\u57df\u3002 |
<ui-card-media-content> | \u53ef\u9009\u3002\u4e0e\u5a92\u4f53\u533a\u57df\u5927\u5c0f\u76f8\u540c\u7684\u7edd\u5bf9\u653e\u7f6e\u7684\u6846\uff0c\u7528\u4e8e\u5728 background-image \u9876\u90e8\u663e\u793a\u6807\u9898\u6216\u56fe\u6807\u3002 |
<ui-card-text> | \u53ef\u9009\u3002\u6587\u5b57\u5185\u5bb9\u533a\u57df\u3002 |
<ui-card-actions> | \u53ef\u9009\u3002\u52a8\u4f5c\u6309\u94ae\u6216\u56fe\u6807\u7684\u5bb9\u5668\u5143\u7d20\u3002 |
<ui-card-buttons> | \u53ef\u9009\u3002 \u4e00\u7ec4\u52a8\u4f5c\u6309\u94ae\uff0c\u663e\u793a\u5728\u5361\u7684\u5de6\u4fa7\uff08\u5728 LTR \u4e2d\uff09\uff0c\u4e0e <ui-card-icons> \u76f8\u90bb\u3002 |
<ui-card-icons> | \u53ef\u9009\u3002 \u4e00\u7ec4\u8865\u5145\u52a8\u4f5c\u56fe\u6807\uff0c\u663e\u793a\u5728\u5361\u7684\u53f3\u4fa7\uff08\u5728 LTR \u4e2d\uff09\uff0c\u4e0e <ui-card-buttons> \u76f8\u90bb\u3002 |
<ui-form-field>\n <ui-checkbox></ui-checkbox>\n <label>Checkbox</label>\n</ui-form-field>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean, array | false | \u590d\u9009\u6846\u503c |
indeterminate | boolean | false | \u4e0d\u786e\u5b9a\u72b6\u6001 |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
value | string, number | '' | \u539f\u751f <input> \u7684 value \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
attrs | object | {} | <input> \u7684\u5176\u4ed6\u5c5e\u6027 |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: boolean|array) | \u590d\u9009\u6846\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u590d\u9009\u6846\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-checkbox v-model="value"></ui-checkbox>\n\u624b\u52a8
<ui-checkbox\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-checkbox>\n\u590d\u9009\u6846\u5141\u8bb8\u7528\u6237\u4ece\u4e00\u7ec4\u4e2d\u9009\u62e9\u4e00\u4e2a\u6216\u591a\u4e2a\u9009\u9879\u3002\u590d\u9009\u6846\u53ef\u7528\u4e8e\u6253\u5f00\u6216\u5173\u95ed\u9009\u9879\u3002
'},64175:function(t,e,o){"use strict";o.r(e);e.default='<ui-chip><!-- the chip text --></ui-chip>\n| Name | Type | Default | Description |
|---|---|---|---|
icon | string | '' | \u8bbe\u7f6e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
selected | boolean | false | \u5f53\u9009\u9879\u5361\u9009\u9879\u88ab\u9009\u4e2d\u65f6\u9690\u85cf\u9996\u56fe\u6807 |
deletable | boolean | false | \u663e\u793a\u7528\u4e8e\u5220\u9664\u9009\u9879\u5361\u9009\u9879\u7684\u5c3e\u56fe\u6807\u3002\u4ec5\u7528\u4e8e\u8f93\u5165\u7c7b\u578b(input)\u548c\u8fc7\u6ee4\u7c7b\u578b(filter)\u7684\u9009\u9879\u5361\u3002 |
\u63d0\u793a\uff1a
removable\u5c5e\u6027\u4ece 10.1.0 \u8d77\u91cd\u547d\u540d\u4e3adeletable\uff0c\u5e76\u65b0\u589e\u652f\u6301\u8fc7\u6ee4\u7c7b\u578b(filter)\u7684\u9009\u9879\u5361
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u9879\u5361\u9009\u9879\u5185\u5bb9\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49\u9009\u9879\u5361\u9009\u9879\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u8f93\u5165\u7c7b\u578b(input)\u7684\u9009\u9879\u5361\u9009\u9879\u5c3e\u56fe\u6807 |
<ui-chips>\n <ui-chip></ui-chip>\n <!-- more chip -->\n</ui-chips>\n<ui-chips> \u7c7b\u578b
0: 'action'1: 'input'2: 'choice'3: 'filter'| Name | Type | Default | Description | Version |
|---|---|---|---|---|
type | string, number | 0 | \u9009\u9879\u5361\u7c7b\u578b | |
modelValue (v-model) | string, number, array | '' | \u9009\u9879\u5361\u9009\u9879\u503c\u3002\u4ece\u4e00\u7ec4\u9009\u9879\u4e2d\u9009\u62e9\u4e00\u4e2a\u6216\u591a\u4e2a\u3002 | |
options | array | [] | \u8bbe\u7f6e\u9009\u9879\u5361\u9009\u9879\u5217\u8868 | |
optionFormat | object | { label: 'label', value: 'value' } | \u5b9a\u4e49\u9009\u9879\u5361\u9009\u9879\u6570\u636e\u683c\u5f0f | 9.34.0 |
items | array | [] | \u4e00\u7ec4\u9009\u9879\u5361\u9009\u9879\u3002\u4ec5\u9002\u7528\u4e8e\u66f4\u65b0\u8f93\u5165\u7c7b\u578b(input)\u7684\u9009\u9879\u5361 |
\u26a0\ufe0f
9.34.0\u4e2doptionLabel\u548coptionValue\u5c5e\u6027\u5df2\u5f03\u7528\uff0c\u8bf7\u4f7f\u7528optionFormat\u4ee3\u66ff\u3002 \u26a0\ufe0f10.0.0\u4e2dchips\u5c5e\u6027\u5df2\u5f03\u7528\uff0c\u8bf7\u4f7f\u7528items\u4ee3\u66ff\u3002
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u9879\u5361\u9009\u9879\u7ec4\u4ef6\u53ca HTML |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(selectedIndex: number|array) | \u9009\u9879\u5361\u9009\u9879\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u9009\u9879\u5361\u9009\u9879\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-chips v-model="selectedIndex"></ui-chips>\n\u624b\u52a8
<ui-chips\n :model-value="selectedIndex"\n @update:model-value="balmUI.onChange('selectedIndex', $event)"\n></ui-chips>\n\u9009\u9879\u5361\u662f\u8868\u793a\u8f93\u5165\uff0c\u5c5e\u6027\u6216\u52a8\u4f5c\u7684\u7d27\u51d1\u5143\u7d20\u3002
'},15504:function(t,e,o){"use strict";o.r(e);e.default='<ui-collapse></ui-collapse>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | boolean | false | \u5c55\u5f00\u72b6\u6001 | |
withIcon | boolean | false | \u542f\u7528\u9ed8\u8ba4\u56fe\u6807 | |
iconEndAligned | boolean | false | \u56fe\u6807\u540e\u7f6e | 9.29.0 |
ripple | boolean, number | false | \u8bbe\u7f6e\u6c34\u6ce2\u7eb9\u6548\u679c |
ripple \u503c\uff1atrue: \u9ed8\u8ba4\u989c\u82721: \u4e3b\u82722: \u8f85\u8272| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6298\u53e0\u9762\u677f\u5185\u5bb9\u53ca HTML | |
expand-more-icon | \u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807 | |
expand-less-icon | \u81ea\u5b9a\u4e49\u6536\u8d77\u56fe\u6807 |
\u53ef\u4ee5\u6298\u53e0\u548c\u6269\u5c55\u7684\u5185\u5bb9\u533a\u57df\u3002
'},25009:function(t,e,o){"use strict";o.r(e);e.default='$confirm(message)
$confirm(options)
interface VueInstance {\n $confirm(options: string | object): Promise<boolean>;\n}\n| Option | Type | Default | Description |
|---|---|---|---|
className | string | '' | \u81ea\u5b9a\u4e49\u786e\u8ba4\u6846\u7684 class |
title | string | '' | \u8bbe\u7f6e\u786e\u8ba4\u6846\u7684\u6807\u9898 |
state | string | '' | \u786e\u8ba4\u6846\u72b6\u6001\u56fe\u6807\u7c7b\u578b |
stateOutlined | boolean | false | \u663e\u793a\u8f6e\u5ed3\u72b6\u6001\u56fe\u6807 |
message | string | '' | \u8bbe\u7f6e\u786e\u8ba4\u6846\u7684\u5185\u5bb9 |
raw | boolean | false | \u6e32\u67d3 HTML |
acceptText | string | 'OK' | \u786e\u5b9a\u6309\u94ae\u6587\u672c |
cancelText | string | 'Cancel' | \u53d6\u6d88\u6309\u94ae\u6587\u672c |
callback | function | false | \u70b9\u51fb\u6309\u94ae\u540e\u7684\u4e8b\u4ef6\u5904\u7406 |
interface ConfirmDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n\u7528\u6cd5 1
$confirm({\n message,\n callback(result) {\n // ...\n }\n});\n\u7528\u6cd5 2\uff08\u63a8\u8350\uff09
$confirm(message).then((result) => {\n // ...\n});\n
result\u662f\u4e00\u4e2a\u5e03\u5c14\u503c\uff0c\u6307\u793a\u662f\u5426\u9009\u62e9\u4e86\u201c\u786e\u5b9a\u201d\u6216\u201c\u53d6\u6d88\u201d\uff08true\u8868\u793a\u786e\u5b9a\uff09
.vue \u7ec4\u4ef6\u4e2d\u4f7f\u7528 $confirmimport { useConfirm } from 'balm-ui';\n// \u6216\n// import { useConfirm } from 'balm-ui/plugins/confirm';\n\nconst $confirm = useConfirm();\n$confirm('Hello BalmUI');\n'},24203:function(t,e,o){"use strict";o.r(e);e.default='New in 9.21.0
<div v-copy></div>\ninterface Copy {\n text: string;\n success: Function;\n error?: Function;\n}\n<ui-datepicker></ui-datepicker>\n<ui-datepicker> \u5728 config.mode \u5c5e\u6027\u4e2d\u7684\u7c7b\u578b
| Name | Type | Default | Description |
|---|---|---|---|
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder\uff09 |
modelValue (v-model) | string, number, array | '' | \u65e5\u671f\u9009\u62e9\u6846\u503c |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
label | string | '' | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff |
placeholder | string | null | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837 |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f |
endAligned | boolean | false | \u8f93\u5165\u6587\u672c\u53f3\u5bf9\u9f50 |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
withLeadingIcon | boolean, string | false | \u542f\u7528\u9996\u56fe\u6807\u6837\uff08\u9700\u4f7f\u7528 before \u63d2\u69fd\uff09 |
withTrailingIcon | boolean, string | false | \u542f\u7528\u5c3e\u56fe\u6807\u6837\u5f0f\uff08\u9700\u4f7f\u7528 after \u63d2\u69fd\uff09 |
config | object | {} | \u8be6\u89c1 Flatpickr configuration |
toggle | boolean | false | \u663e\u793a\u65e5\u5386\u56fe\u6807\u6309\u94ae |
clear | boolean | false | \u663e\u793a\u6e05\u9664\u56fe\u6807\u6309\u94ae |
monthOptions | object | {} | \u8be6\u89c1 Flatpickr month select options |
<ui-datepicker :config="config"></ui-datepicker>\nimport lang from 'flatpickr/dist/l10n/zh.js';\n\nexport default {\n data() {\n return {\n config: {\n locale: lang.zh\n }\n };\n }\n};\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807\uff08withTrailingIcon = true\uff09 |
toggle | \u81ea\u5b9a\u4e49\u65e5\u5386\u56fe\u6807\u6309\u94ae\uff08withTrailingIcon = false\uff09 | |
clear | \u81ea\u5b9a\u4e49\u6e05\u9664\u56fe\u6807\u6309\u94ae\uff08withTrailingIcon = false\uff09 |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: string|array) | \u65e5\u671f\u9009\u62e9\u6846\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u65e5\u671f\u9009\u62e9\u6846\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-datepicker v-model="value"></ui-datepicker>\n\u624b\u52a8
<ui-datepicker\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-datepicker>\n\u65e5\u671f\u9009\u62e9\u5668\u4f7f\u7528\u6237\u53ef\u4ee5\u9009\u62e9\u65e5\u671f\u6216\u65e5\u671f\u8303\u56f4\u3002
'},51479:function(t,e,o){"use strict";o.r(e);e.default=''},20545:function(t,e,o){"use strict";o.r(e);e.default='New in 9.21.0
<div v-debounce></div>\ninterface Debounce {\n callback: Function;\n delay?: number; // defaults: 250 ms\n}\n<ui-dialog-actions><!-- the dialog actions --></ui-dialog-actions>\n| Name | Type | Default | Description |
|---|---|---|---|
acceptText | string | 'OK' | \u786e\u5b9a\u6309\u94ae\u6587\u672c |
cancelText | string | 'Cancel' | \u53d6\u6d88\u6309\u94ae\u6587\u672c |
| Name | Props | Description |
|---|---|---|
default | buttonClass | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u52a8\u4f5c\u53ca HTML |
<template #default="{ buttonClass }">\n <ui-button :class="buttonClass">BUTTON</ui-button>\n</template>\n\u5176\u4ed6\u5b9a\u5236\u5316
data-mdc-dialog-button-default: \u6dfb\u52a0\u5230\u6309\u94ae\u4ee5\u6307\u793a\u5b83\u662f\u9ed8\u8ba4\u64cd\u4f5c\u6309\u94aedata-mdc-dialog-initial-focus: \u6dfb\u52a0\u5230\u5143\u7d20\u4ee5\u6307\u793a\u5b83\u662f\u5bf9\u8bdd\u6846\u6253\u5f00\u540e\u6700\u521d\u8981\u5173\u6ce8\u7684\u5143\u7d20<ui-dialog-content><!-- the dialog content --></ui-dialog-content>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u5185\u5bb9\u53ca HTML |
<ui-dialog-title><!-- the dialog title --></ui-dialog-title>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
closable | boolean | false | \u5c55\u73b0\u5173\u95ed\u6309\u94ae | 9.3.0 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u6807\u9898\u53ca HTML |
<ui-dialog><!-- the dialog child components --></ui-dialog>\n\u63d0\u793a\uff1a
<ui-dialog>\u7684\u52a8\u4f5c\u5fc5\u987b\u5305\u542b\u81f3\u5c11\u4e00\u4e2a<ui-button>\u6216<ui-icon-button>
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | boolean | false | \u5bf9\u8bdd\u6846\u5f00\u542f\u72b6\u6001 | |
escapeKey | boolean | true | \u8bbe\u7f6e\u6309\u4e0b Escape \u952e\u65f6\u53cd\u6620\u7684\u64cd\u4f5c\u3002\u8bbe\u7f6e\u4e3a false \u5c06\u7981\u7528\u901a\u8fc7 Escape \u952e\u5173\u95ed\u5bf9\u8bdd\u6846\u3002 | 9.13.0 |
closable | boolean | true | \u5f53\u7528\u6237\u5bf9\u201c\u63a5\u53d7\u201d\u6216\u201c\u53d6\u6d88\u201d\u6309\u94ae\u8fdb\u884c\u64cd\u4f5c\u65f6\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u3002 | |
maskClosable | boolean | false | \u5f53\u70b9\u51fb\u5bf9\u8bdd\u6846\u906e\u7f69\u5c42\u65f6\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u3002 | |
noScrim | boolean | false | \u9690\u85cf\u5bf9\u8bdd\u6846\u906e\u7f69\u5c42 | |
resetScroll | boolean | false | \u5bf9\u8bdd\u6846\u5173\u95ed\u65f6\uff0c\u91cd\u7f6e\u6eda\u52a8\u6761\u3002 | |
fullscreen | boolean | false | \u5168\u5c4f\u6548\u679c | 9.14.0 |
sheet | boolean | false | \u9ed8\u8ba4\u542f\u7528\u5173\u95ed\u6309\u94ae | 10.5.0 |
noContentPadding | boolean | false | \u53d6\u6d88\u5bf9\u8bdd\u6846\u5185\u5bb9\u7684\u9ed8\u8ba4 padding | 10.5.0 |
\u63d0\u793a\uff1a\u5168\u5c4f\u5bf9\u8bdd\u6846\u9002\u7528\u4e8e\u79fb\u52a8/\u5c0f\u5c4f\u5e55\u8bbe\u5907\u3002
\u63d0\u793a\uff1a
noBackdrop\u5c5e\u6027\u4ece 9.25.0 \u8d77\u91cd\u547d\u540d\u4e3anoScrim
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u5b50\u7ec4\u4ef6 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-dialog-title><ui-dialog-content><ui-dialog-actions>| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | \u5bf9\u8bdd\u6846\u5f00\u542f\u72b6\u6001\u53d8\u5316\u65f6\u89e6\u53d1 |
close | function() | \u5bf9\u8bdd\u6846\u5173\u95ed\u65f6\u89e6\u53d1 |
confirm | function(result: boolean) | \u70b9\u51fb\u5bf9\u8bdd\u6846\u52a8\u4f5c\u6309\u94ae\u65f6\u89e6\u53d1 |
accept | function() | \u70b9\u51fb\u5bf9\u8bdd\u6846\u786e\u5b9a\u6309\u94ae\u65f6\u89e6\u53d1 |
cancel | function() | \u70b9\u51fb\u5bf9\u8bdd\u6846\u53d6\u6d88\u6309\u94ae\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u5bf9\u8bdd\u6846\u5f00\u542f\u72b6\u6001\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-dialog v-model="open"></ui-dialog>\n\u624b\u52a8
<ui-dialog\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-dialog>\n\u5bf9\u8bdd\u6846\u901a\u77e5\u7528\u6237\u6709\u5173\u4e00\u9879\u4efb\u52a1\u7684\u4fe1\u606f\uff0c\u5e76\u4e14\u53ef\u4ee5\u5305\u542b\u5173\u952e\u4fe1\u606f\uff0c\u9700\u8981\u505a\u51fa\u51b3\u5b9a\u6216\u6d89\u53ca\u591a\u4e2a\u4efb\u52a1\u3002
'},3364:function(t,e,o){"use strict";o.r(e);e.default='<ui-dialog>\n <ui-dialog-title></ui-dialog-title>\n <ui-dialog-content></ui-dialog-content>\n <ui-dialog-actions></ui-dialog-actions>\n</ui-dialog>\n| Component | Description |
|---|---|
<ui-dialog> | \u5bf9\u8bdd\u6846\u5bb9\u5668\u5143\u7d20 |
<ui-dialog-title> | \u5bf9\u8bdd\u6846\u6807\u9898\u5143\u7d20 |
<ui-dialog-content> | \u5bf9\u8bdd\u6846\u4e3b\u8981\u5185\u5bb9\u533a\u57df\u3002\u53ef\u80fd\u5305\u542b\u5217\u8868\uff0c\u8868\u5355\u6216\u6587\u7ae0\u3002 |
<ui-dialog-actions> | \u5bf9\u8bdd\u6846\u5e95\u90e8\u533a\u57df\uff0c\u5305\u542b\u5bf9\u8bdd\u6846\u7684\u64cd\u4f5c\u6309\u94ae\u3002 |
<ui-divider></ui-divider>\n<ui-divider> \u7c7b\u578b
0: 'horizontal'1: 'vertical'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | \u5206\u5272\u7ebf\u7c7b\u578b |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5206\u5272\u7ebf\u6587\u672c\u53ca HTML | |
left | \u4ec5\u9002\u7528\u4e8e\u5782\u76f4\u5206\u9694\u7b26\u7684\u5de6\u8fb9\u6587\u672c | |
right | \u4ec5\u9002\u7528\u4e8e\u5782\u76f4\u5206\u9694\u7b26\u7684\u53f3\u8fb9\u6587\u672c |
\u5206\u9694\u7ebf\u662f\u5c06\u5185\u5bb9\u6309\u5217\u8868\u548c\u5e03\u5c40\u5206\u7ec4\u7684\u7ec6\u7ebf\u3002
'},68872:function(t,e,o){"use strict";o.r(e);e.default='<ui-drawer type="dismissible"></ui-drawer>\n<ui-drawer-app-content><!-- Content --></ui-drawer-app-content>\n'},95835:function(t,e,o){"use strict";o.r(e);e.default='\u4ec5\u9650\u5e94\u7528\u4e8e
<ui-drawer type="dismissible">
\u26a0\ufe0f \u63d0\u793a\uff1a
<ui-drawer-backdrop>\u5728 9.25.0 \u4e2d\u5df2\u5f03\u7528\uff0c\u76f4\u63a5\u4f7f\u7528<ui-drawer type="modal">\u5373\u53ef\u3002
For balm-ui < 9.25.0
<ui-drawer type="modal"></ui-drawer>\n<ui-drawer-backdrop></ui-drawer-backdrop>\n<div><!-- Content --></div>\n<ui-drawer-content><!-- the list of items --></ui-drawer-content>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b router link \u5217\u8868\u53ca HTML |
<ui-drawer-header><!-- the drawer header child components --></ui-drawer-header>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bfc\u822a\u7684\u6807\u9898\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-drawer-title><ui-drawer-subtitle><ui-drawer><!-- the drawer child components --></ui-drawer>\n<ui-drawer> \u7c7b\u578b
0: 'permanent'1: 'dismissible'2: 'modal'\u63d0\u793a\uff1a
<ui-drawer> (type="permanent") \u6ca1\u6709\u5c5e\u6027\u548c\u4e8b\u4ef6<ui-drawer type="dismissible"> \u548c <ui-drawer type="modal"> \u5fc5\u987b\u5305\u542b\u4e00\u4e2a <ui-nav>\u3002\u800c\u4e14\u5bfc\u822a\u4e2d\u7684\u7b2c\u4e00\u4e2a <ui-nav-item> \u9ed8\u8ba4\u5fc5\u987b\u4e3a\u6fc0\u6d3b\u72b6\u6001\u3002| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | \u4fa7\u8fb9\u5bfc\u822a\u680f\u7c7b\u578b |
navId | string | null | \u5916\u90e8\u83dc\u5355\u6309\u94ae\u9009\u62e9\u5668\uff08\u8bf7\u53c2\u8003 top app bar \u7684 navId \u5c5e\u6027\uff09 |
modelValue (v-model) | boolean | false | \u5bfc\u822a\u5207\u6362\u7684\u72b6\u6001 |
viewportHeight | boolean | false | \u8bbe\u7f6e\u89c6\u7a97\u5168\u9ad8\u5ea6\uff08100vh\uff09 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bfc\u822a\u7684\u5b50\u7ec4\u4ef6 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-drawer-header><ui-drawer-content>| Name | Type | Description |
|---|---|---|
nav | function(open: boolean) | \u5bfc\u822a\u5f00\u5173\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@nav\u76d1\u542c\u4fa7\u8fb9\u5bfc\u822a\u680f\u5207\u6362\u72b6\u6001\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-drawer v-model="open" type="modal"></ui-drawer>\n\u624b\u52a8
<ui-drawer\n :model-value="open"\n type="modal"\n @nav="balmUI.onChange('open', $event)"\n></ui-drawer>\n\u4fa7\u8fb9\u5bfc\u822a\u680f\u63d0\u4f9b\u5bf9\u5e94\u7528\u7a0b\u5e8f\u4e2d\u76ee\u6807\u4f4d\u7f6e\u7684\u8bbf\u95ee\u3002
'},12948:function(t,e,o){"use strict";o.r(e);e.default='<ui-drawer>\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item active>Activated link</ui-nav-item>\n <ui-nav-item>Unactivated link</ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n</ui-drawer>\n| Component | Description |
|---|---|
<ui-drawer> | \u5bfc\u822a\u5bb9\u5668\u5143\u7d20 |
<ui-drawer-header> | \u5bfc\u822a\u9876\u90e8\u5143\u7d20\uff08\u4e0d\u53ef\u6eda\u52a8\uff09 |
<ui-drawer-title> | \u5bfc\u822a\u4e3b\u6807\u9898\u5143\u7d20 |
<ui-drawer-subtitle> | \u5bfc\u822a\u526f\u6807\u9898\u5143\u7d20 |
<ui-drawer-content> | \u5bfc\u822a\u5185\u5bb9\u5143\u7d20\uff08\u53ef\u6eda\u52a8\uff09 |
<ui-drawer-app-content> | \u5bfc\u822a\u6253\u5f00/\u5173\u95ed\u65f6\u8c03\u6574\u5927\u5c0f\u7684\u540c\u7ea7\u5143\u7d20\u3002\u4ec5\u9650\u5e94\u7528\u4e8e <ui-drawer type="dismissible"> |
<ui-editor></ui-editor>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | string | '' | \u5bcc\u6587\u672c\u503c | |
options | object | {} | \u8be6\u89c1 Quill options | |
toolbar | array, string | null | \u5bcc\u6587\u672c\u5de5\u5177\u680f\u914d\u7f6e\uff08\u81ea\u5b9a\u4e49\u6216 'full') | |
placeholder | string | null | \u5f53\u7f16\u8f91\u5668\u4e3a\u7a7a\u65f6\u663e\u793a\u7684\u5360\u4f4d\u7b26\u6587\u672c | |
readonly | boolean | false | \u53ea\u8bfb\u6a21\u5f0f | |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | 10.3.0 |
theme | string | 'snow' | \u4e3b\u9898\u6837\u5f0f | |
toolbarIcons | object | {} | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u56fe\u6807 | |
toolbarTips | object | {} | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u56fe\u6807\u63d0\u793a\u6587\u672c | 9.2.0 |
toolbarOptions | object | { font: [], size: [], lineheight:[] } | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u7684\u5b57\u4f53\uff0c\u6587\u5b57\u5927\u5c0f\u548c\u884c\u9ad8 | |
toolbarHandlers | object | {} | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u4e8b\u4ef6\u5904\u7406 | |
customImageHandler | boolean | false | \u542f\u7528\u81ea\u5b9a\u4e49\u56fe\u7247\u4e8b\u4ef6\u5904\u7406 | |
emotions | array | [] | \u8868\u60c5\u6269\u5c55\u3002\u652f\u6301 emoji \u548c image | |
withCounter | boolean | false | \u542f\u7528\u5185\u90e8\u8ba1\u6570\u5668 | |
extension | false, object | false | \u81ea\u5b9a\u4e49 Quill \u6269\u5c55 |
interface Editor {\n theme: 'bubble' | 'snow';\n}\ninterface Editor {\n theme: 'bubble' | 'snow';\n}\ntoolbar \u5c5e\u6027align/direction/indentbackground/color/font/sizeblockquote/code-block/header/listbold/italic/link/script/strike/underlineimage/videofont/size/lineheight: \u81ea\u5b9a\u4e49\u5b57\u4f53\uff0c\u6587\u5b57\u5927\u5c0f\u548c\u884c\u9ad8image: \u81ea\u5b9a\u4e49\u56fe\u7247\u4e0a\u4f20\u5904\u7406emoji: \u8868\u60c5\u6a21\u5757divider: \u6c34\u5e73\u5206\u5272\u7ebftextindent: \u5185\u8054\u7684\u6587\u672c\u7f29\u8fdb\uff08\u7c7b\u4f3c indent\uff09linkoff: \u6e05\u9664\u6240\u6709\u94fe\u63a5counter: \u8ba1\u6570\u5668\u6a21\u5757undo/redo: \u5185\u7f6e\u7684\u64a4\u9500\u548c\u91cd\u505a\u5904\u7406selectall: \u9009\u4e2d\u5168\u90e8\u5185\u5bb9toolbarOptions \u548c emotions \u5168\u5c40\u914d\u7f6e/path/to/app/scripts/config/editor.js
const toolbarTips = {\n header: 'Headline',\n font: 'Font Famliy',\n size: 'Font Size',\n lineheight: 'Line Height',\n bold: 'Bold',\n italic: 'Italic',\n underline: 'Underline',\n color: 'Text Color',\n background: 'Background Color',\n align: {\n default: 'Left Align',\n center: 'Center Align',\n right: 'Right Align',\n justify: 'Justify Align'\n },\n list: {\n ordered: 'Ordered List',\n bullet: 'Bullet List'\n },\n indent: {\n '+1': 'Increase Indent',\n '-1': 'Decrease Indent'\n },\n blockquote: 'Blockquote',\n emoji: 'Emoji'\n};\n\nconst toolbarOptions = {\n // \u81ea\u5b9a\u4e49 Font Family \u9700\u5bf9\u5e94\u914d\u7f6e Sass \u53d8\u91cf `$font-family`\n font: [\n 'Arial',\n 'Arial Black',\n 'Comic Sans MS',\n 'Courier New',\n 'Tahoma',\n 'Georgia',\n 'Helvetica',\n 'Segoe UI',\n 'Impact',\n 'Times New Roman',\n 'Verdana'\n ],\n size: [\n '8px',\n '9px',\n '10px',\n '11px',\n '12px',\n '13px',\n '14px',\n '16px',\n '18px',\n '24px',\n '36px',\n '48px',\n '60px',\n '72px',\n '96px'\n ],\n lineheight: [\n '1',\n '1.2',\n '1.5',\n '1.6',\n '1.8',\n '2',\n '2.4',\n '2.8',\n '3',\n '4',\n '5'\n ]\n};\n\nconst emotions = [\n {\n type: 'image',\n title: 'Default',\n content: [\n {\n name: 'oo',\n alt: '\u574f\u7b11',\n src: 'https://material.balmjs.com/images/emoji/p_huaixiao.png'\n },\n {\n name: 'xx',\n alt: '\u8214\u5c4f',\n src: 'https://material.balmjs.com/images/emoji/p_tian.png'\n }\n ]\n },\n {\n type: 'emoji',\n title: 'emoji',\n content: [\n {\n name: 'smile',\n value: '\ud83d\ude00'\n },\n {\n name: 'cry',\n value: '\ud83d\ude06'\n }\n ]\n },\n {\n type: 'image',\n title: 'Custom',\n content: [\n {\n name: 'yy',\n alt: '\u795e\u517d',\n src: 'https://material.balmjs.com/images/emoji/g_shenshou.gif'\n },\n {\n name: 'zz',\n alt: '\u6d6e\u4e91',\n src: 'https://material.balmjs.com/images/emoji/g_fuyun.gif'\n }\n ]\n }\n];\n\nexport { toolbarTips, toolbarOptions, emotions };\n/path/to/app/scripts/main.js
import { toolbarTips, toolbarOptions, emotions } from '@/config/editor';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\n// `app`: Vue app\napp.use(BalmUIPlus, {\n UiEditor: {\n toolbarTips,\n toolbarOptions,\n emotions\n }\n});\ntoolbarHandlers \u5c5e\u6027{\n toolbar: ['customFormat'],\n toolbarHandlers: {\n customFormat: (quill, value) => {};\n }\n}\nquill.insert(customFormat, value) => {}: \u5411\u5bcc\u6587\u672c\u63d2\u5165\u5185\u5bb9quill.insert('html', content): \u5411\u5bcc\u6587\u672c HTML (New in 9.2.0)| Name | Props | Description |
|---|---|---|
toolbar | toolbar \u63d2\u69fd\u5305\u542b\u81ea\u5b9a\u4e49\u5de5\u5177\u6309\u94ae\u53ca HTML |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(content: string) | \u5bcc\u6587\u672c\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
file-change | function(file, insert) | \u9700\u8981\u914d\u7f6e customImageHandler\uff08\u901a\u8fc7 insert(url) \u65b9\u6cd5\u5411\u5bcc\u6587\u672c\u63d2\u5165\u4e0a\u4f20\u56fe\u7247\uff09 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u5bcc\u6587\u672c\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-editor v-model="content"></ui-editor>\n\u624b\u52a8
<ui-editor\n :model-value="content"\n @update:model-value="balmUI.onChange('content', $event)"\n></ui-editor>\nEncode & Decode Emoji
<ui-editor ref="editor" v-model="content"></ui-editor>\n$refs.editor.useEditor(): \u83b7\u53d6 Quill \u6a21\u5757\u548c\u4e00\u4e2a quill \u5b9e\u4f8b (New in 10.4.0)this.$refs.editor.decodeEmoji(content): \u83b7\u53d6\u670d\u52a1\u7aef\u6570\u636e \u2192 \u8bbe\u7f6e\u5ba2\u6237\u7aef\u5c55\u793athis.$refs.editor.encodeEmoji(html): \u63d0\u4ea4\u5ba2\u6237\u7aef\u6570\u636e \u2192 \u4fdd\u5b58\u670d\u52a1\u7aef\u6570\u636e\u4e00\u6b3e\u73b0\u4ee3\u7684\u6240\u89c1\u5373\u6240\u5f97\u7f16\u8f91\u5668\uff08\u57fa\u4e8e Quill \u4e14\u5185\u7f6e\u4e86\u4e30\u5bcc\u7684\u6269\u5c55\u529f\u80fd\uff09\u3002
'},43446:function(t,e,o){"use strict";o.r(e);e.default='\u5c42\u7ea7\u9634\u5f71\u4e3a\u7269\u4f53\u7684\u6df1\u5ea6\u548c\u65b9\u5411\u8fd0\u52a8\u63d0\u4f9b\u4e86\u91cd\u8981\u7684\u89c6\u89c9\u7ebf\u7d22\u3002\u5b83\u4eec\u662f\u6307\u793a\u8868\u9762\u4e4b\u95f4\u5206\u79bb\u7a0b\u5ea6\u7684\u552f\u4e00\u89c6\u89c9\u63d0\u793a\u3002 \u5bf9\u8c61\u7684\u9ad8\u7a0b\u786e\u5b9a\u5176\u9634\u5f71\u7684\u5916\u89c2\u3002 \u9ad8\u7a0b\u503c\u6620\u5c04\u5230\u201c z \u7a7a\u95f4\u201d\u4e2d\uff0c\u8303\u56f4\u4ece 0 \u5230 24\u3002
<div v-shadow="4"></div>\nv-shadow="z"| Value | Type | Default | Description |
|---|---|---|---|
z | number | 0 | \u8bbe\u7f6e\u9634\u5f71\u5c42\u7ea7\uff0c\u8303\u56f4\u503c\uff1a[0, 24] |
v-shadow.transition="[z1, z2]"\u5e94\u7528\u6b63\u786e\u7684 CSS \u89c4\u5219\u5728\u9634\u5f71\u5c42\u7ea7\u4e4b\u95f4\u8f6c\u6362\uff1a
z1: \u9ed8\u8ba4\u7684\u5c42\u7ea7z2: \u9f20\u6807\u7ecf\u8fc7\u65f6\u7684\u5c42\u7ea7\u26a0\ufe0f \u4e0d\u652f\u6301
<script setup>
interface BalmUIEvent {\n onChange(property: string, value: any, fn?: Function);\n\n onOpen(property: string, fn?: Function);\n onShow(property: string, fn?: Function);\n\n onClose(property: string, fn?: Function);\n onHide(property: string, fn?: Function);\n}\n| Name | Type | Default | Description |
|---|---|---|---|
property | string | '' | \u66f4\u65b0\u6307\u5b9a\u7684 Vue \u5b9e\u4f8b\u5bf9\u8c61\u6570\u636e\uff08data or setup\uff09 |
value | any | undefined | \u6307\u5b9a Vue \u5b9e\u4f8b\u5bf9\u8c61\u6570\u636e\uff08data or setup\uff09\u7684\u65b0\u503c\u3002\u4ec5\u9650 balmUI.onChange \u65b9\u6cd5\u3002 |
fn | function | noop | \u66f4\u65b0\u6570\u636e\u540e\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6 |
import { useEvent } from 'balm-ui';\n// \u6216\n// import { useEvent } from 'balm-ui/plugins/event';\n\nconst balmUI = useEvent();\n\u66f4\u65b0 Vue \u5b9e\u4f8b\u7684\u6570\u636e\u5bf9\u8c61\u4e3a new value
balmUI.onChange(property, value);\n\u66f4\u65b0 Vue \u5b9e\u4f8b\u7684\u6570\u636e\u5bf9\u8c61\u4e3a true
balmUI.onOpen(property);\nbalmUI.onShow(property);\n\u66f4\u65b0 Vue \u5b9e\u4f8b\u7684\u6570\u636e\u5bf9\u8c61\u4e3a false
balmUI.onClose(property);\nbalmUI.onHide(property);\nbalmResize\uff08\u4f18\u4e8e resize\uff09
balmScroll\uff08\u4f18\u4e8e scroll\uff09
Composition API
import { onMounted, onBeforeUnmount } from 'vue';\n\nfunction init() {\n // ...\n}\n\nexport default {\n setup() {\n onMounted(() => {\n init();\n window.addEventListener('balmResize', init);\n });\n\n onBeforeUnmount(() => {\n window.removeEventListener('balmResize', init);\n });\n }\n};\nOptions API
export default {\n mounted() {\n this.init();\n window.addEventListener('balmResize', this.init);\n },\n beforeUnmount() {\n window.removeEventListener('balmResize', this.init);\n },\n methods: {\n init() {\n // ...\n }\n }\n};\n$bus.on(event, callback)
$bus.once(event, callback) (New in 10.9.0)
$bus.off(event, callback)
$bus.emit(eventName, ...args)
interface BalmUIEventBus {\n on(event: string | string[], callback: Function); // \u76d1\u542c\u5f53\u524d\u5b9e\u4f8b\u4e0a\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002\n once(event: string, callback: Function); // \u76d1\u542c\u4e00\u4e2a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u4f46\u662f\u53ea\u89e6\u53d1\u4e00\u6b21\u3002\n off(event: string | string[], callback?: Function); // \u79fb\u9664\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u76d1\u542c\u5668\u3002\n emit(eventName: string, ...args); // \u89e6\u53d1\u5f53\u524d\u5b9e\u4f8b\u4e0a\u7684\u4e8b\u4ef6\u3002\u9644\u52a0\u53c2\u6570\u90fd\u4f1a\u4f20\u7ed9\u76d1\u542c\u5668\u56de\u8c03\u3002\n}\n\ninterface VueInstance {\n $bus: BalmUIEventBus;\n}\n| Name | Type | Default | Description |
|---|---|---|---|
event, eventName | string | \u5168\u5c40\u901a\u4fe1\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u540d\u79f0 | |
args | any | \u5168\u5c40\u901a\u4fe1\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u65b9\u6cd5\u7684\u53c2\u6570 | |
callback | function | \u5168\u5c40\u901a\u4fe1\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u65b9\u6cd5 |
.vue \u7ec4\u4ef6\u4e2d\u4f7f\u7528 $busComposition API
// `/path/to/awesome.vue`\nimport { onMounted, onBeforeUnmount } from 'vue';\nimport { useBus } from 'balm-ui';\n\nexport default {\n setup() {\n const bus = useBus();\n\n onMounted(() => {\n bus.on('custom-event', (msg) => {\n console.log(msg);\n });\n });\n\n onBeforeUnmount(() => {\n bus.off('custom-event');\n });\n }\n};\nOptions API
// `/path/to/awesome.vue`\nexport default {\n mounted() {\n this.$bus.on('custom-event', (msg) => {\n console.log(msg);\n });\n },\n beforeUnmount() {\n this.$bus.off('custom-event');\n }\n};\n.vue \u7ec4\u4ef6\u4e2d\u4f7f\u7528 $bus// `/path/to/awesome.js`\n\nimport { useBus } from 'balm-ui';\n// \u6216\n// import { useBus } from 'balm-ui/plugins/event';\n\nconst bus = useBus();\nbus.emit('custom-event', 'Hello BalmUI');\n<ui-fab><!-- Icon --></ui-fab>\n\n<ui-fab extended><!-- Text label --></ui-fab>\n<ui-fab> \u7c7b\u578b
0: 'regular'1: 'extended'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | \u6d6e\u52a8\u6309\u94ae\u7c7b\u578b |
extended | boolean | false | \u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u3002\u5c06\u6d6e\u52a8\u6309\u94ae\u4fee\u6539\u4e3a\u66f4\u5927\u7684\u5c3a\u5bf8\uff0c\u5305\u62ec\u6587\u672c\u6807\u7b7e\u3002 |
icon | string | '' | \u8bbe\u7f6e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
mini | boolean | false | \u8ff7\u4f60\u6d6e\u52a8\u6309\u94ae |
exited | boolean | false | \u5bf9\u6d6e\u52a8\u6309\u94ae\u8fdb\u884c\u52a8\u753b\u5904\u7406 |
| Name | Props | Description |
|---|---|---|
default | iconClass | default \u63d2\u69fd\u5305\u542b\u6d6e\u52a8\u6309\u94ae\u6587\u5b57\u6216\u56fe\u6807 |
before | iconClass | \u81ea\u5b9a\u4e49\u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u7684\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u7684\u5c3e\u56fe\u6807 |
\u63d0\u793a\uff1a\u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u7684 default \u63d2\u69fd\u6ca1\u6709
slot-scope
<ui-fab>\n <template #default="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-fab>\n\n<ui-fab extended>\n <template #before="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n Text label\n</ui-fab>\n| Name | Type | Description |
|---|---|---|
click | function(event: object) | \u70b9\u51fb\u6d6e\u52a8\u6309\u94ae\u65f6\u89e6\u53d1 |
\u6d6e\u52a8\u52a8\u4f5c\u6309\u94ae\uff08FAB\uff09\u8868\u793a\u5c4f\u5e55\u7684\u4e3b\u8981\u52a8\u4f5c\u3002
'},7686:function(t,e,o){"use strict";o.r(e);e.default='<ui-file></ui-file>\n| Name | Type | Default | Description |
|---|---|---|---|
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
accept | string | '' | \u53ef\u4ee5\u63a5\u53d7\u7684\u6587\u4ef6\u7c7b\u578b |
multiple | boolean | false | \u652f\u6301\u591a\u6587\u4ef6\u4e0a\u4f20 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
outlined | boolean | false | \u4e0a\u4f20\u6309\u94ae\u663e\u793a\u4e3a\u8f6e\u5ed3\u6309\u94ae\u6837\u5f0f |
text | string | 'Upload' | \u4e0a\u4f20\u6309\u94ae\u7684\u6587\u672c |
preview | boolean | false | \u542f\u7528\u53ef\u9884\u89c8\u6a21\u5f0f |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u4e0a\u4f20\u6309\u94ae\u53ca HTML |
| Name | Type | Description |
|---|---|---|
change | function(files: array) | \u6587\u4ef6\u53d8\u5316\u65f6\u89e6\u53d1 |
files \u4e2d\u6bcf\u4e2a file \u7684\u5c5e\u6027| Name | Type | Description |
|---|---|---|
tmpId | string | \u4e34\u65f6\u552f\u4e00 ID |
lastModified | number | \u8fd4\u56de\u6587\u4ef6\u7684\u4e0a\u6b21\u4fee\u6539\u65f6\u95f4\uff0c\u4ee5 UNIX \u7eaa\u5143\u4ee5\u6765\u7684\u6beb\u79d2\u6570\u4e3a\u5355\u4f4d (January 1st, 1970 at Midnight) |
name | string | \u8fd4\u56de File \u5bf9\u8c61\u5f15\u7528\u7684\u6587\u4ef6\u7684\u540d\u79f0 |
size | number | \u8fd4\u56de\u6587\u4ef6\u7684\u5927\u5c0f\uff08\u4ee5\u5b57\u8282\u4e3a\u5355\u4f4d\uff09 |
type | string | \u8fd4\u56de\u6587\u4ef6\u7684 MIME \u7c7b\u578b |
sourceFile | file | \u8fd4\u56de\u4e00\u4e2a\u65b0\u7684 Blob \u5bf9\u8c61\uff0c\u5176\u4e2d\u5305\u542b\u6e90 Blob \u7684\u6307\u5b9a\u5b57\u8282\u8303\u56f4\u5185\u7684\u6570\u636e |
previewSrc | string | \u7528\u4e8e\u9884\u89c8\u7684 src \u6570\u636e\u3002 \u4ec5\u9002\u7528\u4e8e\u53ef\u9884\u89c8\u6a21\u5f0f |
previewError | number | \u9884\u89c8\u9519\u8bef\u4ee3\u7801\uff1a{0: 'OK', 1: 'Not image type', 2: 'Unsupported'} |
<ui-form-field>\n <label></label>\n <!-- awesome form item -->\n</ui-form-field>\n| Name | Type | Default | Description |
|---|---|---|---|
nowrap | boolean | false | \u5f3a\u5236\u6587\u672c\u663e\u793a\u4e00\u884c\uff0c\u5e76\u4f7f\u6ea2\u51fa\u7684\u6587\u672c\u663e\u793a\u7701\u7565\u53f7\u3002 |
alignEnd | boolean | false | \u5c06\u5185\u5bb9\u653e\u7f6e\u5728 <label> \u4e4b\u540e |
spaceBetween | boolean | false | \u5bf9\u9f50\u5185\u5bb9\u548c <label> \u4e4b\u95f4\u7684\u7a7a\u95f4 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u8868\u5355\u9879\u5185\u5bb9\u53ca HTML |
<ui-form>\n <template #default="{ subitemClass, actionClass }">\n <ui-form-field>\n <label></label>\n <!-- awesome form item 1 -->\n <ui-form-field></ui-form-field>\n </ui-form-field>\n <ui-form-field>\n <label></label>\n <div :class="subitemClass">\n <!-- awesome form item 2 -->\n <ui-form-field></ui-form-field>\n <ui-form-field></ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field :class="actionClass">\n <ui-button></ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n<ui-form> \u7c7b\u578b
0: 'horizontal'1: 'vertical'| Name | Type | Default | Description | Version |
|---|---|---|---|---|
type | string, number | 0 | \u8bbe\u7f6e\u8868\u5355\u7c7b\u578b\uff08\u6c34\u5e73\u6216\u5782\u76f4\u6a21\u5f0f\uff09 | |
itemMarginBottom | number | 0 | \u8bbe\u7f6e\u8868\u5355\u9879\u4e0b\u8fb9\u8ddd | |
nowrap | boolean | false | \u56fa\u5b9a\u8868\u5355\u9879 <label>\uff0c\u8d85\u8fc7\u90e8\u5206\u7684\u6587\u5b57\u7528\u7701\u7565\u53f7\u8868\u793a | |
labelTopAligned | boolean | false | \u8bbe\u7f6e\u8868\u5355\u9879 <label> \u9876\u5bf9\u9f50 | |
labelRightAligned | boolean | false | \u8bbe\u7f6e\u8868\u5355\u9879 <label> \u53f3\u5bf9\u9f50 | |
labelTopRightAligned | boolean | false | \u8bbe\u7f6e\u8868\u5355\u9879 <label> \u9876\u5bf9\u9f50\u4e14\u53f3\u5bf9\u9f50 | 9.9.0 |
labelWidth | number | 0 | \uff08\u6c34\u5e73\u6a21\u5f0f\u8868\u5355\uff09\u8bbe\u7f6e <label> \u5bbd\u5ea6 | |
labelMarginRight | number | 0 | \uff08\u6c34\u5e73\u6a21\u5f0f\u8868\u5355\uff09\u8bbe\u7f6e <label> \u53f3\u8fb9\u8ddd | |
labelMarginBottom | number | 0 | \uff08\u5782\u76f4\u6a21\u5f0f\u8868\u5355\uff09\u8bbe\u7f6e <label> \u4e0b\u8fb9\u8ddd | |
actionAlign | string | 'left' | \u8bbe\u7f6e\u8868\u5355\u52a8\u4f5c\u9879\u7684\u5bf9\u9f50\u65b9\u5f0f | 9.9.0 |
labelTopAligned\uff0clabelRightAligned\u548clabelTopRightAligned\u53ea\u80fd\u5e94\u7528\u4e8e\u6c34\u5e73\u6a21\u5f0f\u8868\u5355\u3002
interface Form {\n actionAlign: 'left' | 'center' | 'right';\n}\n| Name | Props | Description |
|---|---|---|
default | itemClass, subitemClass, actionClass | default \u63d2\u69fd\u5305\u542b\u8868\u5355\u9879\u53ca HTML |
'},31323:function(t,e,o){"use strict";o.r(e);e.default='
itemClass\u548csubitemClass\u662f 9.9.0 \u65b0\u589e prop
<ui-grid-cell><!-- the grid cell content --></ui-grid-cell>\n| Name | Type | Default | Description |
|---|---|---|---|
nested | boolean | false | \u5f00\u542f\u5d4c\u5957\u6805\u683c\u5e03\u5c40 |
columns | number, object | 4 | \u6307\u5b9a\u5355\u5143\u683c\u8de8\u8d8a\u7684\u5217\u6570 |
order | number | 0 | \u6307\u5b9a\u5355\u5143\u683c\u7684\u987a\u5e8f |
align | string | '' | \u6307\u5b9a\u5355\u5143\u683c\u7684\u5bf9\u9f50\u65b9\u5f0f |
interface GridCell {\n columns: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n order: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n align: 'top' | 'middle' | 'bottom';\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5355\u5143\u683c\u5185\u5bb9\u53ca HTML |
\u5f53\u4f60\u7684\u5185\u5bb9\u9700\u8981\u989d\u5916\u7ed3\u6784\u4e14\u5355\u4e2a\u6805\u683c\u5e03\u5c40\u65e0\u6cd5\u652f\u6301\u65f6\uff0c\u53ef\u4ee5\u5c06\u6805\u683c\u5e03\u5c40\u5f7c\u6b64\u5d4c\u5957\u3002 \u5f00\u542f\u5d4c\u5957\u6805\u683c\u5e03\u5c40\uff0c\u8bf7\u4f7f\u7528
<ui-grid-cell nested>
<ui-grid>\n <ui-grid-cell nested>\n <!-- Parent 1 -->\n <ui-grid-cell>Child 1</ui-grid-cell>\n <ui-grid-cell>Child 2</ui-grid-cell>\n <ui-grid-cell>Child 3</ui-grid-cell>\n </ui-grid-cell>\n <ui-grid-cell>Parent 2</ui-grid-cell>\n <ui-grid-cell>Parent 3</ui-grid-cell>\n</ui-grid>\n$grid
interface VueInstance {\n set: BalmUIGrid;\n}\ntype GridProperty = 'margin' | 'gutter' | 'column-width';\ntype GridSize = 'desktop' | 'tablet' | 'phone';\n\ninterface BalmUIGrid {\n set(property: GridProperty, size: GridSize, value: string): void;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
property | string | '' | \u6805\u683c\u5c5e\u6027 |
size | string | '' | \u76ee\u6807\u5e73\u53f0 |
value | string | '' | \u81ea\u5b9a\u4e49\u6805\u683c\u503c |
margin: \u6805\u683c\u8fb9\u8ddd\u7684\u5927\u5c0fgutter: \u5355\u5143\u4e4b\u95f4\u7684\u88c5\u8ba2\u7ebf\u7684\u5927\u5c0fcolumn-width: \u6805\u683c\u5185\u5217\u7684\u5bbd\u5ea6.vue \u7ec4\u4ef6\u4e2d\u4f7f\u7528 $gridimport { useGrid } from 'balm-ui';\n// \u6216\n// import { useGrid } from 'balm-ui/plugins/grid';\n\nconst $grid = useGrid();\n<ui-grid><!-- the grid cell --></ui-grid>\n| Name | Type | Default | Description |
|---|---|---|---|
fixedColumnWidth | boolean | false | \u6307\u5b9a\u6805\u683c\u5e94\u5177\u6709\u56fa\u5b9a\u7684\u5217\u5bbd |
position | string | '' | \u6307\u5b9a\u6574\u4e2a\u6805\u683c\u7684\u5bf9\u9f50\u65b9\u5f0f |
interface Grid {\n position: 'left' | 'right';\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b <ui-grid-cell> \u53ca HTML |
Material design \u7684\u54cd\u5e94\u5f0f UI \u57fa\u4e8e\u5217\u53d8\u91cf\u6805\u683c\u5e03\u5c40\u3002\u5b83\u5728\u53f0\u5f0f\u673a\u4e0a\u6709 12 \u5217\uff0c\u5728\u5e73\u677f\u7535\u8111\u4e0a\u6709 8 \u5217\uff0c\u5728\u624b\u673a\u4e0a\u6709 4 \u5217\u3002
'},73916:function(t,e,o){"use strict";o.r(e);e.default='\u4ee5\u4e0b\u914d\u7f6e\u4ecd\u7136\u662f\u57fa\u4e8e Balm CLI \u6784\u5efa\u7684 Vue \u811a\u624b\u67b6\u3002
\u7f16\u8f91 /path/to/my-project/config/balmrc.js
module.exports = {\n styles: {\n extname: 'scss'\n },\n scripts: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n // Other Options...\n};\n\u7f16\u8f91 /path/to/my-project/app/styles/global/_vendors.scss
SASS/CSSManagement by BalmJS: the entry files of the vendors
@use '@material/theme' as theme-variables with (\n $primary: #6200ee,\n $secondary: #018786\n);\n\n@use 'balm-ui/dist/balm-ui';\n\u7136\u540e\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7 Sass\u53d8\u91cf \u590d\u5199\u6216\u91cd\u65b0\u5b9a\u4e49 UI \u6837\u5f0f\u3002\uff08\u8be6\u60c5\u89c1\u5404\u7ec4\u4ef6\u7684 SASS\u53d8\u91cf \u6587\u6863\uff09
\u5165\u53e3\u6a21\u677f\u6587\u4ef6\u6807\u51c6\u683c\u5f0f\uff1a
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\n\u5982\u679c\u7b2c\u4e09\u65b9\u63d0\u4f9b\u4e86 sass/css \u6587\u4ef6\uff0c\u5efa\u8bae\u5728
/path/to/my-project/app/styles/global/_vendors.scss\u4e2d\u8fdb\u884c\u7ba1\u7406
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <link rel="stylesheet" href="/node_modules/path/to/some-plugin.css" />\n <!-- endbuild -->\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\ncss/vendors.css: BalmJS \u5de5\u4f5c\u6d41\u5408\u5e76\u6307\u5b9a\u7b2c\u4e09\u65b9\u6837\u5f0f\u6587\u4ef6\u4e4b\u540e\u7684\u6587\u4ef6\u8def\u5f84\u3002main.css: \u9879\u76ee\u7684\u6837\u5f0f\u5165\u53e3\u6587\u4ef6\u3002\u63a8\u8350\u7528\u4e8e \u684c\u9762\u7aef
2.1.1 JS\u4e2d\u5f15\u7528\uff08\u63a8\u8350\uff09
\u7f16\u8f91 /path/to/my-project/app/scripts/main.js
import { createApp } from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\n\n// Import BalmUI styles (Not recommend usage, and see above "SASS/CSS Management" for recommended usage)\nimport 'balm-ui-css';\n\nconst app = createApp(App);\n\napp.use(BalmUI); // Mandatory\napp.use(BalmUIPlus); // Optional\n\napp.mount('#app');\n2.1.2 \u6d4f\u89c8\u5668\u4e2d\u5f15\u7528
\u7f16\u8f91 /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui-plus.js"></script>\n <!-- endbuild -->\n <script>\n var app = Vue.createApp({\n setup() {\n var message = 'Hello BalmUI';\n\n return {\n message\n };\n }\n });\n\n app.use(BalmUI);\n app.use(BalmUIPlus);\n\n app.mount('#app');\n </script>\n </body>\n</html>\n\u63a8\u8350\u7528\u4e8e \u79fb\u52a8\u7aef\uff0c\u56e0\u4e3a\u6784\u5efa\u66f4\u5c0f\u66f4\u5feb\u3002
2.2.1 JS\u4e2d\u5f15\u7528
\u7f16\u8f91 /path/to/my-project/app/scripts/main.js
import { createApp } from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\n// Import BalmUI styles (Not recommend usage, and see below "SASS/CSS management" for recommended usage)\nimport 'balm-ui/components/core.css';\nimport 'balm-ui/components/button/button.css';\nimport 'balm-ui/components/icon/icon.css';\nimport 'balm-ui/components/dialog/dialog.css';\nimport 'balm-ui/plugins/alert/alert.css';\n\nconst app = createApp(App);\n\n// Install components or plugins\napp.use(UiButton);\napp.use($alert);\n\napp.mount('#app');\n\u5173\u4e8e CSSinJS \uff0c\u53ef\u4ee5\u901a\u8fc7BalmJS\u914d\u7f6e\u6765\u63d0\u53d6\u6837\u5f0f\uff1b\u4f46\u662f BalmJS\u7684\u601d\u60f3 \u66f4\u5efa\u8bae\u5206\u79bb\u7ba1\u7406\u9879\u76ee\u4e2d\u7684\u6837\u5f0f\u548c\u811a\u672c\uff0c\u4ee5\u5b9e\u73b0\u66f4\u7075\u6d3b\u7684\u6a21\u5757\u914d\u7f6e\u548c\u7ba1\u7406\u3002
SASS \u7ba1\u7406 (/path/to/my-project/app/styles/global/_vendors.scss)
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\nCSS \u7ba1\u7406 (/path/to/my-project/app/index.html)
<head>\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/icon/icon.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n</head>\n2.2.2 \u6d4f\u89c8\u5668\u4e2d\u5f15\u7528
\u7f16\u8f91 /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/icon/icon.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/components/button/button.js"></script>\n <script src="/node_modules/balm-ui/plugins/alert/alert.js"></script>\n <!-- endbuild -->\n <script>\n var app = Vue.createApp({\n setup() {\n var message = 'Hello BalmUI';\n\n return {\n message\n };\n }\n });\n\n app.use(UiButton);\n app.use($alert);\n\n app.mount('#app');\n </script>\n </body>\n</html>\n\u8fd9\u662f\u6700\u4f18\u5316\u7684\u4ee3\u7801\u6784\u5efa\u65b9\u6848\uff0c\u7528\u6cd5\u548c\u9ed8\u8ba4\u6784\u5efa\u7248\u672c\u76f8\u540c\u3002
\u26a0\ufe0f \u63d0\u793a\uff1a
balm-ui< 9.40.0 \u7684 alias \u914d\u7f6e
{\n 'balm-ui-source': 'balm-ui/src/scripts/index.js',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/plus.js'\n}\n2.3.1 Balm CLI
\u7f16\u8f91 /path/to/my-project/config/balmrc.js\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\uff1a
const path = require('path');\n\nfunction resolve(dir) {\n return path.join(__dirname, '..', dir);\n}\n\nmodule.exports = {\n ...\n scripts: {\n // To explicitly transpile a dependency with Babel\n includeJsResource: [\n resolve('node_modules/balm-ui/src/scripts')\n ],\n // Reassign the entry file\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts/balm-ui.js',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/balm-ui-plus.js'\n }\n },\n ...\n};\n2.3.2 Vue CLI or Vite
vue-cli
// vue.config.js\nmodule.exports = {\n runtimeCompiler: true,\n transpileDependencies: ['node_modules/balm-ui/src/scripts'],\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts/balm-ui.js',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/balm-ui-plus.js'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-source', 'balm-ui/src/scripts/balm-ui.js')\n // .set('balm-ui-plus-source', 'balm-ui/src/scripts/balm-ui-plus.js');\n // }\n};\nvite
// vite.config.js\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n plugins: [vue()],\n resolve: {\n alias: {\n vue: 'vue/dist/vue.esm-bundler.js',\n 'balm-ui-source': 'balm-ui/src/scripts/balm-ui.js',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/balm-ui-plus.js'\n }\n }\n});\n\u73b0\u5728\uff0c\u4ee3\u7801\u4e2d\u5f15\u7528\u7684
balm-ui\u5df2\u76f4\u63a5\u6307\u5411\u4e86\u6e90\u4ee3\u7801\uff0c\u53ef\u7528\u4e8e\u5f00\u53d1\u6216\u8c03\u8bd5 BalmUI\u3002
\u7f16\u8f91 /path/to/my-project/balm.config.js
const config = require('./config/balmrc');\n\nconst api = (mix) => {\n if (mix.env.isProd) {\n // ...\n } else {\n // Use BalmJS `copy` api\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n\nmodule.exports = (balm) => {\n return {\n config,\n api\n };\n};\nBalmUI \u662f\u4e3a Vue 3 \u91cf\u8eab\u8ba2\u5236\u7684\u6a21\u5757\u5316\u4e14\u9ad8\u53ef\u5b9a\u5236\u5316\u7684 Material Design UI \u5e93\u3002
balm-ui(v8) for Vue 2, see v8.material.balmjs.com
\u6211\u4eec\u5e0c\u671b\u60a8\u80fd\u505a\u51fa\u8d21\u732e\uff0c\u5e76\u4f7f BalmUI \u53d8\u5f97\u66f4\u597d\uff01\u63d0\u51fa\u62c9\u53d6\u8bf7\u6c42\u4e4b\u524d\uff0c\u8bf7\u52a1\u5fc5\u5148\u9605\u8bfb\u8d21\u732e\u6307\u5357\u3002\u60a8\u53ef\u4ee5\u5c06\u4efb\u4f55\u60f3\u6cd5\u4f5c\u4e3aPull \u8bf7\u6c42\u6216 GitHub \u95ee\u9898\u63d0\u4ea4\u4e0a\u6765\u3002
\u6211\u4eec\u652f\u6301\u5e76\u6d4b\u8bd5\u7684\u6d4f\u89c8\u5668\u8303\u56f4\u4e0e Google MDC Web \u4fdd\u6301\u4e00\u81f4\uff1a
\u5982\u679c\u9700\u8981\u8bf7\u76f4\u63a5 \u590d\u5236\u7c98\u8d34 \u6216 \u81ea\u5b9a\u4e49
\u6587\u4ef6\uff1a/path/to/app/scripts/kill-ie.js
import { detectIE } from 'balm-ui'; // \u9ed8\u8ba4\u7528\u6cd5\n// \u6216\n// import detectIE from 'balm-ui/utils/ie'; // \u72ec\u7acb\u7528\u6cd5\n\nconst IE = detectIE();\n\nconst isIE = IE && IE <= 11;\n\nconst killIE = () => {\n let body = document.getElementsByTagName('body')[0];\n let template = `<div class="kill-ie">\n <h1>\u60a8\u5f53\u524d\u4f7f\u7528\u7684\u6d4f\u89c8\u5668\u7248\u672c\u8fc7\u4f4e\uff0c\u53ef\u80fd\u5b58\u5728\u5b89\u5168\u98ce\u9669\uff0c\u8bf7\u70b9\u51fb<a href="https://browsehappy.com/">\u8fd9\u91cc</a>\u9009\u62e9\u4e00\u6b3e\u65b0\u7248\u6d4f\u89c8\u5668\u3002</h1>\n <p>\u5efa\u8bae\u5347\u7ea7\uff1a<a href="https://www.google.cn/intl/zh-CN/chrome/">\u8c37\u6b4c\u6d4f\u89c8\u5668</a></p>\n </div>`;\n\n body.innerHTML = template;\n};\n\nexport { isIE, killIE };\n\u6587\u4ef6\uff1a/path/to/app/scripts/main.js
import { isIE, killIE } from './kill-ie';\n\nif (isIE) {\n killIE();\n} else {\n // your code\n}\n\u6587\u4ef6\uff1a/path/to/app/styles/_kill-ie.scss
.kill-ie {\n position: absolute;\n text-align: center;\n background-color: #bdbdbd;\n\n h1 {\n font-size: 36px;\n }\n\n p {\n font-size: 24px;\n }\n\n a {\n text-decoration: underline;\n color: red;\n font-weight: bold;\n }\n}\n\u5728\u5f00\u59cb\u4e4b\u524d\uff0c\u60a8\u9700\u8981\u5148\u8bbe\u7f6e\u5f00\u53d1\u73af\u5883\u3002
\u5982\u679c\u60a8\u7684\u8ba1\u7b97\u673a\u4e0a\u5c1a\u672a\u5b89\u88c5 Node.js\xae and npm\uff0c\u8bf7\u5b89\u88c5\u5b83\u4eec\u3002
\u901a\u8fc7\u5728\u7ec8\u7aef/\u63a7\u5236\u53f0\u7a97\u53e3\u4e2d\u8fd0\u884c
node -v\u548cnpm -v\u6765\u9a8c\u8bc1\u60a8\u81f3\u5c11\u5728\u8fd0\u884c Node.js 10.13.0 \u6216\u66f4\u9ad8\u7248\u672c\u4ee5\u53ca npm 5.2.0 \u6216\u66f4\u9ad8\u7248\u672c\u3002\u8f83\u65e7\u7684\u7248\u672c\u53ef\u80fd\u4f1a\u4ea7\u751f\u9519\u8bef\uff0c\u6240\u4ee5\u63a8\u8350\u4f7f\u7528\u8f83\u65b0\u7684\u7248\u672c\u3002
\u5de5\u6b32\u5584\u5176\u4e8b\uff0c\u5fc5\u5148\u5229\u5176\u5668\u3002\u597d\u7684\u5de5\u5177\u53ef\u4ee5\u4f7f\u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u66f4\u5feb\uff0c\u66f4\u5bb9\u6613\u7ef4\u62a4\u3002
Balm CLI \u662f\u4e00\u4e2a\u547d\u4ee4\u884c\u754c\u9762\u5de5\u5177\uff0c\u7528\u4e8e\u6784\u5efa BalmJS \u9879\u76ee\u3002
**Balm CLI**\uff08BalmJS \u5b98\u65b9\u63a8\u8350\uff09 \u6216 Vue CLI/Vite \u6216 \u5176\u4ed6\u5de5\u5177\u94fe \ud83d\ude80
\u4f7f\u7528 Balm CLI \u524d\u9996\u5148\u9700\u8981\u5168\u5c40\u5b89\u88c5 Balm Core \u548c Balm CLI\u3002
npm install -g balm-core balm-cli\n# OR\nyarn global add balm-core balm-cli\n\u26a0\ufe0f \u63d0\u793a\uff1a\u5982\u679c\u4f60\u4f7f\u7528 pnpm\uff0c\u8bf7\u4e3a BalmUI \u914d\u7f6e
.npmrc\u6587\u4ef6
\u628a\u6240\u6709\u4f9d\u8d56\u90fd\u63d0\u5347\u5230 node_modules \u7684\u6839\u76ee\u5f55\uff1a
shamefully-hoist=true\n\u6216\u8005\u53ea\u63d0\u5347\u5339\u914d\u7684\u4f9d\u8d56\u5305\uff1a
public-hoist-pattern[]="*balm*"\npublic-hoist-pattern[]="*deepmerge*"\npublic-hoist-pattern[]="*flatpickr*"\npublic-hoist-pattern[]="*material-components-web*"\npublic-hoist-pattern[]="@material*"\npublic-hoist-pattern[]="*quill*"\n\u6253\u5f00\u4e00\u4e2a\u547d\u4ee4\u884c\u7a97\u53e3\u3002
\u6839\u636e\u4ee5\u4e0b\u547d\u4ee4\u751f\u6210\u4e00\u4e2a\u65b0\u9879\u76ee\uff1a
balm init vue my-project\ncd my-project # Go to the project directory\n\u5b89\u88c5\u4f9d\u8d56
yarn\n# OR\nnpm install\n\u5b89\u88c5\u5fc5\u987b\u8981\u7684 npm \u5305\uff0c\u8fd9\u91cc\u53ef\u80fd\u9700\u8981\u4e00\u4e9b\u65f6\u95f4\u3002
\uff08China Only\uff09\u5982\u679c\u201c\u7f51\u7edc\u201d\u4e0d\u79d1\u5b66\uff0c\u8bf7\u8bbe\u7f6e\u6dd8\u5b9d\u6e90
balm-uiyarn add balm-ui\n# OR\nnpm install --save balm-ui\n\u66f4\u65b0 balm.config.js
\u83b7\u53d6 Material Icons \u65e0\u9700\u4e0b\u8f7d\uff08\u6216\u8005\u4e0b\u8f7d\u540e\u89e3\u538b\u81f3 my-project/app/fonts\uff09
const api = (mix) => {\n if (mix.env.isDev) {\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n\u7f16\u8f91 my-project/config/balmrc.js\uff0c\u914d\u7f6e\u4f7f\u7528 Dart Sass
module.exports = {\n styles: {\n extname: 'scss'\n }\n // Other Options...\n};\n\u7f16\u8f91 my-project/app/styles/global/_vendors.scss
/* import BalmUI styles */\n@use 'balm-ui/dist/balm-ui';\n\u63a8\u8350\u5728
/path/to/project-name/styles/_vendors.scss\u4e2d\u4f7f\u7528 Sass\uff0c\u8fd9\u6837\u4f60\u5c06\u80fd\u4f7f\u7528\u5230\u66f4\u591a BalmUI \u7684\u9ad8\u7ea7\u7b80\u4fbf\u7684\u6837\u5f0f\u7ba1\u7406\u65b9\u6848\u3002
\u7f16\u8f91 my-project/app/scripts/main.js
import { createApp } from 'vue';\nimport App from '@/views/layouts/app';\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components\n\nconst app = createApp(App);\n\napp.use(BalmUI); // Mandatory\napp.use(BalmUIPlus); // Optional\n\napp.mount('#app');\n\u7f16\u8f91 my-project/app/styles/global/_vendors.scss
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n\u7f16\u8f91 my-project/app/scripts/main.js
import { createApp } from 'vue';\nimport App from '@/views/layouts/app';\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\nconst app = createApp(App);\n\napp.use(UiButton);\napp.use($alert);\n\napp.mount('#app');\nnpm run dev\n\u7f16\u8f91\u4e00\u4e2a vue \u7ec4\u4ef6\uff1amy-project/app/scripts/views/components/hello.vue
<template>\n <div class="hello">\n ...\n <!-- Add a test button -->\n <ui-button icon="add" @click="$alert('Hello BalmUI')">Click Me</ui-button>\n </div>\n</template>\nnpm run prod\nvue-cli
vue create my-project\n\ncd my-project\nvite
# npm 6.x\nnpm init @vitejs/app my-project --template vue\n\n# npm 7+, extra double-dash is needed:\nnpm init @vitejs/app my-project -- --template vue\n\n# yarn\nyarn create @vitejs/app my-project --template vue\n\ncd my-project\nbalm-uiyarn add balm-ui\n# OR\nnpm install --save balm-ui\nvue-cli
// vue.config.js\nmodule.exports = {\n runtimeCompiler: true,\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')\n // .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');\n // }\n};\nvite
// vite.config.js\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n plugins: [vue()],\n resolve: {\n alias: {\n vue: 'vue/dist/vue.esm-bundler.js',\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.esm.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n});\n\u7f16\u8f91 my-project/src/main.js
import { createApp } from 'vue';\nimport App from './App.vue';\n\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\nimport 'balm-ui-css';\n\nconst app = createApp(App);\n\napp.use(BalmUI);\napp.use(BalmUIPlus);\n\napp.mount('#app');\n<script> \u5f15\u7528<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Hello BalmUI</title>\n <link rel="stylesheet" href="https://unpkg.com/balm-ui/dist/balm-ui.css" />\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n <script src="https://unpkg.com/vue"></script>\n <script src="https://unpkg.com/balm-ui"></script>\n <script src="https://unpkg.com/balm-ui/dist/balm-ui-plus.js"></script>\n <script>\n const app = Vue.createApp({\n setup() {\n var message = 'Hello BalmUI';\n\n return {\n message\n };\n }\n });\n\n app.use(BalmUI);\n app.use(BalmUIPlus);\n\n app.mount('#app');\n </script>\n </body>\n</html>\n\u6109\u5feb\u7684\u201c\u7801\u201d\u8d77\u6765 \ud83d\udc7b
'},14833:function(t,e,o){"use strict";o.r(e);e.default='
balm-ui>= 9.40.0
alias
{\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js'\n}\ntsconfig.json
{\n "compilerOptions": {\n "baseUrl": ".",\n "paths": {\n "balm-ui-plus": ["node_modules/balm-ui/dist/balm-ui-plus.d.ts"]\n }\n }\n}\nbalm-ui-next.js \u5df2\u5f03\u7528UiCollapse \u4ece balm-ui-plus.js \u5230 balm-ui.js \u5e93UiBottomNavigation \u4ece balm-ui-next.js \u5230 balm-ui-plus.js \u5e93UiBottomSheet \u4ece balm-ui-next.js \u5230 balm-ui-plus.js \u5e93vDebounce \u4ece balm-ui-plus.js \u5230 balm-ui.js \u5e93UiAlert \u4ece balm-ui-plus.js \u5230 balm-ui.js \u5e93$validator: \u66f4\u65b0\u9a8c\u8bc1\u89c4\u5219\u683c\u5f0f
Old
interface BalmUIValidationRule {\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = {\n [key: string]: BalmUIValidationRule;\n}\nNew
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = BalmUIValidationRule[]\n<ui-chips>: \u91cd\u547d\u540d\u5c5e\u6027 chips \u4e3a items<ui-nav>: \u79fb\u9664\u5c5e\u6027 modelValue, singleSelection \u548c\u76f8\u5173\u4e8b\u4ef6UiAutocomplete, UiDatepicker, UiRangepicker \u4ece balm-ui-plus.js \u5230 balm-ui.js \u5e93$alert, $confirm, $toast \u4ece balm-ui-plus.js \u5230 balm-ui.js \u5e93<ui-icon-button>, <ui-textfield>, <ui-autocomplete>, <ui-editor>, <ui-select>, <ui-checkbox>, <ui-radio>, <ui-chips>, <ui-datepicker>, <ui-rangepicker>, <ui-switch>, <ui-slider>: \u91cd\u547d\u540d\u5c5e\u6027 model \u4e3a modelValue<ui-drawer>, <ui-menu>: \u91cd\u547d\u540d\u5c5e\u6027 open \u4e3a modelValue<ui-tab-bar>, <ui-tabs>: \u91cd\u547d\u540d\u5c5e\u6027 active \u4e3a modelValue<ui-pagination>: \u91cd\u547d\u540d\u5c5e\u6027 page \u4e3a modelValue<ui-textfield>, <ui-autocomplete>, <ui-checkbox>, <ui-radio>, <ui-file>, <ui-datepicker>, <ui-switch>: \u91cd\u547d\u540d\u5c5e\u6027 id \u4e3a inputId<ui-icon-button>, <ui-drawer>, <ui-tab-bar>, <ui-tabs>, <ui-menu>, <ui-pagination>, <ui-editor>, <ui-select>, <ui-checkbox>, <ui-radio>, <ui-chips>, <ui-datepicker>, <ui-rangepicker>, <ui-switch>, <ui-slider>: \u4e8b\u4ef6\u5c5e\u6027 @change \u4e3a @update:modelValue<ui-textfield>, <ui-autocomplete>: \u4e8b\u4ef6\u5c5e\u6027 @input \u4e3a @update:modelValue\u65b0\u7ec4\u4ef6:
<ui-banner><ui-tooltip><ui-nav-item>\u65b0\u63d2\u4ef6:
$bus$store$theme: \u5168\u65b0\u7684\u4e3b\u9898 APIs
v-shape: \u5168\u65b0\u7684\u5f62\u72b6 APIs
<ui-menuitem>: \u65b0\u589e\u5c5e\u6027 value
<ui-form>: \u65b0\u589e\u5c5e\u6027 itemMarginBottom, labelWidth, labelMarginRight, labelMarginBottom
Sass: \u590d\u5199\u53d8\u91cf\u66f4\u7b80\u6d01
\u65e7\u7684
@use '@material/button/variables';\n\u65b0\u7684
@use '@material/button';\n$themeColor, $setTheme, $textColor, $setTextTheme: \u5df2\u5f03\u7528\u3002\u4f7f\u7528 $theme \u4ee3\u66ff<ui-slider>: \u91cd\u547d\u540d\u5c5e\u6027 displayMarker \u4e3a withTickMarks<ui-pagination>:before, before-jumper \u548c after-jumperfirst \u548c last<ui-nav>: \u79fb\u9664\u63d2\u69fd\u5c5e\u6027 itemClass, activeClass\u3002\u4f7f\u7528\u65b0\u7ec4\u4ef6 <ui-nav-item><ui-table>: thead \u81ea\u5b9a\u4e49\u5bf9\u8c61\u4e2d\u7684 by \u5b57\u6bb5\u91cd\u547d\u540d\u4e3a columnId<ui-drawer>: \u65b0\u589e\u5c5e\u6027 viewportHeight<ui-menu>, <ui-select>: \u5404\u65b0\u589e\u5c5e\u6027 fullwidth<ui-textfield>: \u65b0\u589e\u5c5e\u6027 prefixText, suffixText, endAligned, withCounterv-anchor: \u65b0\u589e\u4fee\u9970\u7b26 bodyElement<ui-a><ui-icon-a><ui-nav>: \u91cd\u547d\u540d\u63d2\u69fd\u5c5e\u6027 activatedClass \u4e3a activeClass<ui-textfield>: \u79fb\u9664\u5c5e\u6027 dense<ui-textfield-helper>: \u91cd\u547d\u540d\u5c5e\u6027 counter \u4e3a withCounter<ui-textfield-counter>: \u79fb\u9664\u7ec4\u4ef6\u3002\u4f7f\u7528 <ui-textfield-helper withCounter> \u6216 <ui-textfield withCounter> \u6765\u4ee3\u66ff<ui-icon-button></ui-icon-button>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean | false | \u5207\u6362\u72b6\u6001 |
icon | string | '' | \u8bbe\u7f6e\u5355\u4e2a\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
toggle | object | {} | \u8bbe\u7f6e\u5207\u6362\u6309\u94ae\u4e24\u4e2a\u72b6\u6001\u7684\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
\u901a\u8fc7 toggle.on \u548c toggle.off \u5c5e\u6027\u914d\u7f6e\u5207\u6362\u6309\u94ae\u72b6\u6001\u7684\u56fe\u6807
interface IconButton {\n toggle: {\n on: string;\n off: string;\n };\n}\n| Name | Props | Description |
|---|---|---|
default | onClass, offClass | default \u63d2\u69fd\u5305\u542b\u81ea\u5b9a\u4e49\u56fe\u6807\uff08\u7ec4\uff09\u53ca HTML |
<template #default="{ onClass, offClass }">\n <i :class="onClass">ON</i>\n <i :class="offClass">OFF</i>\n</template>\n| Name | Type | Description |
|---|---|---|
click | function(event: object) | \u70b9\u51fb\u56fe\u6807\u6309\u94ae\u65f6\u89e6\u53d1 |
update:modelValue | function(value: boolean) | \u5207\u6362\u56fe\u6807\u72b6\u6001\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u56fe\u6807\u6309\u94ae\u72b6\u6001\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-icon-button v-model="value"></ui-icon-button>\n\u624b\u52a8
<ui-icon-button\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-icon-button>\n\u56fe\u6807\u6309\u94ae\uff08\u5207\u6362\u6309\u94ae\uff09\u4f7f\u7528\u6237\u53ea\u9700\u5355\u51fb\u4e00\u4e0b\u5373\u53ef\u6267\u884c\u64cd\u4f5c\u5e76\u505a\u51fa\u9009\u62e9\u3002
'},67315:function(t,e,o){"use strict";o.r(e);e.default='<ui-icon><!-- the material design icon name --></ui-icon>\n<ui-icon> \u7c7b\u578b
0: 'filled'1: 'outlined'2: 'round'3: 'twoTone'4: 'sharp'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | \u56fe\u6807\u7c7b\u578b |
outlined | boolean | false | \u8f6e\u5ed3\u56fe\u6807\u53ef\u81ea\u5b9a\u4e49\u7b14\u89e6\u548c\u586b\u5145\u5c5e\u6027\uff0c\u4ee5\u63d0\u4f9b\u4e00\u79cd\u8f7b\u5de7\uff0c\u5e72\u51c0\u7684\u6837\u5f0f\uff0c\u8be5\u6837\u5f0f\u5728\u5bc6\u96c6\u7684 UI \u4e2d\u6548\u679c\u5f88\u597d\u3002 \u53ef\u4ee5\u8c03\u6574\u8f6e\u5ed3\u56fe\u6807\u7684\u7b14\u5212\u7c97\u7ec6\uff0c\u4ee5\u8865\u5145\u6216\u5bf9\u6bd4\u5b57\u4f53\u7684\u7c97\u7ec6\u3002 |
round | boolean | false | \u5706\u5f62\u56fe\u6807\u4f7f\u7528\u7684\u8f6c\u89d2\u534a\u5f84\u4e0e\u4f7f\u7528\u8f83\u91cd\u7684\u5b57\u4f53\uff0c\u5f2f\u66f2\u7684\u5fbd\u6807\u6216\u5706\u5f62\u5143\u7d20\u6765\u8868\u8fbe\u5176\u98ce\u683c\u7684\u54c1\u724c\u642d\u914d\u5f97\u5f88\u597d\u3002 |
twoTone | boolean | false | \u53cc\u8272\u56fe\u6807\u4f7f\u7528\u7b14\u89e6\uff0c\u586b\u5145\u548c\u989c\u8272\u7684\u5c5e\u6027\u6dfb\u52a0\u4e86\u5c3a\u5bf8\u3002 \u7b14\u89e6\u548c\u586b\u5145\u8272\u7684\u5bf9\u6bd4\u4f7f\u60a8\u53ef\u4ee5\u4f7f\u7528\u591a\u79cd\u54c1\u724c\u989c\u8272\uff0c\u5e76\u53ef\u4ee5\u63d0\u9ad8\u6e05\u6670\u5ea6\u3002 |
sharp | boolean | false | \u5c16\u9510\u56fe\u6807\u663e\u793a\u5e26\u6709\u76f4\u8fb9\u7684\u89d2\uff0c\u4ee5\u786e\u4fdd\u5373\u4f7f\u5728\u8f83\u5c0f\u7684\u6bd4\u4f8b\u4e0b\u4e5f\u6e05\u6670\u53ef\u8fa8\u7684\u6837\u5f0f\u3002 \u8fd9\u4e9b\u77e9\u5f62\u53ef\u4ee5\u652f\u6301\u54c1\u724c\u98ce\u683c\uff0c\u800c\u5706\u5f62\u4e0d\u80fd\u5f88\u597d\u5730\u4f53\u73b0\u8fd9\u79cd\u98ce\u683c\u3002 |
size | number | 24 | \u56fe\u6807\u5c3a\u5bf8 |
dark | boolean | false | \u6df1\u8272\u56fe\u6807\uff08\u7528\u4e8e\u6d45\u8272\u80cc\u666f\u4e0a\uff09 |
light | boolean | false | \u6d45\u8272\u56fe\u6807\uff08\u7528\u4e8e\u6df1\u8272\u80cc\u666f\u4e0a\uff09 |
inactive | boolean | false | \u7981\u7528\u6216\u4e0d\u6d3b\u52a8\u72b6\u6001 |
\u5c3d\u7ba1\u5b57\u4f53\u4e2d\u7684\u56fe\u6807\u53ef\u4ee5\u7f29\u653e\u4e3a\u4efb\u610f\u5927\u5c0f\uff0c\u4f46\u6839\u636e Material Design Icons \u51c6\u5219\uff0c\u6211\u4eec\u5efa\u8bae\u5c06\u5b83\u4eec\u663e\u793a\u4e3a
18,24,36\u621648px\u3002
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b material design \u56fe\u6807\u540d\u53ca HTML |
| Name | Type | Description |
|---|---|---|
click | function(event: object) | \u70b9\u51fb\u56fe\u6807\u65f6\u89e6\u53d1 |
Material icons \u662f\u4e00\u7ec4\u5e38\u89c1\u52a8\u4f5c\u548c\u7269\u54c1\u7684\u7b26\u53f7\u56fe\u6807\u96c6\u5408\u3002
'},22890:function(t,e,o){"use strict";o.r(e);e.default='<ui-image-item><!-- image and text --></ui-image-item>\n| Name | Type | Default | Description |
|---|---|---|---|
image | string | null | \u4e3a\u56fe\u7247\u5217\u8868\u9879\u6dfb\u52a0\u4e00\u4e2a <img> \u5143\u7d20\u5e76\u8bbe\u7f6e src \u5c5e\u6027 |
bgImage | string | null | \u4f7f\u7528\u4e00\u4e2a <div> \u4ee3\u66ff<img> \u5143\u7d20 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u7247\u5217\u8868\u9879\u7684\u6587\u5b57\u6807\u7b7e\u5185\u5bb9\u53ca HTML | |
image | \u81ea\u5b9a\u4e49\u56fe\u7247 |
| Name | Type | Description |
|---|---|---|
click | function(event: object) | \u70b9\u51fb\u56fe\u7247\u5217\u8868\u9879\u65f6\u89e6\u53d1 |
<ui-image-list><!-- the image item components --></ui-image-list>\n<ui-image-list> \u7c7b\u578b
0: 'standard'1: 'masonry'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | \u56fe\u7247\u5217\u8868\u7c7b\u578b |
masonry | boolean | false | \u7011\u5e03\u6d41\u6837\u5f0f |
textProtection | boolean | false | \u56fe\u7247\u5217\u8868\u9879\u7684\u6587\u5b57\u6807\u7b7e\u653e\u7f6e\u4e8e\u56fe\u7247\u4e2d\uff08\u800c\u975e\u56fe\u7247\u4e0b\u65b9\uff09 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u7247\u5217\u8868\u9879\u5185\u5bb9\u53ca HTML |
<ui-image-text><!-- Text labels --></ui-image-text>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u7247\u76f8\u5173\u7684\u4e00\u884c\u6587\u672c\u6807\u7b7e | |
action | action \u63d2\u69fd\u5305\u542b\u56fe\u7247\u76f8\u5173\u52a8\u4f5c\u5185\u5bb9 |
\u56fe\u7247\u5217\u8868\u5728\u6709\u7ec4\u7ec7\u7684\u7f51\u683c\u4e2d\u663e\u793a\u56fe\u7247\u7684\u96c6\u5408\u3002
'},45266:function(t,e,o){"use strict";o.r(e);e.default='<ui-image-list>\n <ui-image-item>\n <ui-image-text></ui-image-text>\n </ui-image-item>\n</ui-image-list>\n| Component | Description |
|---|---|
<ui-image-list> | \u56fe\u7247\u5217\u8868\u5143\u7d20 |
<ui-image-item> | \u56fe\u7247\u5217\u8868\u9879\u5143\u7d20 |
<ui-image-text> | \u56fe\u7247\u5217\u8868\u9879\u7684\u6587\u5b57\u6807\u7b7e\u5143\u7d20 |
\u5217\u8868\u662f\u6587\u672c\u6216\u56fe\u50cf\u7684\u8fde\u7eed\u5782\u76f4\u7d22\u5f15\u3002
'},45588:function(t,e,o){"use strict";o.r(e);e.default='<ui-list-divider></ui-list-divider>\n\n<ui-item-divider></ui-item-divider>\n| Name | Type | Default | Description |
|---|---|---|---|
padded | boolean | false | \u5728\u5206\u9694\u7ebf\u7684\u6bcf\u4e00\u4fa7\u90fd\u7559\u6709\u95f4\u9699\uff0c\u4ee5\u5339\u914d\u6700\u540e\u4e00\u4e2a\u56fe\u5757\u7684\u586b\u5145\u3002 |
inset | boolean | false | \u589e\u52a0\u5206\u9694\u7ebf\u7684\u524d\u5bfc\u8fb9\u8ddd\uff0c\u4ee5\u4f7f\u5176\u4e0d\u4e0e\u56fe\u6807\u6216\u56fe\u50cf\u5217\u76f8\u4ea4\u3002 |
<ui-list-group>\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n</ui-list-group>\n<ui-item><!-- the item child components --></ui-item>\n\n<ui-nav-item><!-- the link item child components --></ui-nav-item>\n<ui-item> Props| Name | Type | Default | Description |
|---|---|---|---|
selected | boolean | false | \u9009\u4e2d\u72b6\u6001 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
<ui-nav-item> Props| Name | Type | Default | Description |
|---|---|---|---|
href | string | (required) | \u89e3\u6790\u7684\u7f51\u5740\u3002\u8fd9\u5c06\u662f\u4e00\u4e2a a \u5143\u7d20\u7684 href \u5c5e\u6027\u3002 |
active | boolean | false | \u6fc0\u6d3b\u72b6\u6001 |
\u4e0e <router-link> \u4e00\u8d77\u4f7f\u7528\uff08\u9700\u8981 vue-router@3.1.0+\uff09
<router-link v-slot="{ href, navigate, isActive }" custom>\n <ui-nav-item\n :href="href"\n :active="isActive"\n @click="navigate"\n ></ui-nav-item>\n</router-link>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5217\u8868\u9879\u5b50\u7ec4\u4ef6\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49 <ui-item-first-content> \u7684\u5185\u5bb9\u3002\u901a\u5e38\u662f\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
after | iconClass | \u81ea\u5b9a\u4e49 <ui-item-last-content> \u7684\u5185\u5bb9\u3002\u901a\u5e38\u4e3a\u5c0f\u6587\u5b57\uff0c\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-item-text-content><ui-item-text1><ui-item-text2><ui-item-first-content><ui-item-last-content>| Name | Type | Description |
|---|---|---|
click | function(event: object) | \u70b9\u51fb\u5217\u8868\u9879\u65f6\u89e6\u53d1 |
<ui-list><!-- <ui-item> --></ui-list>\n\n<ui-nav><!-- <ui-nav-item> --></ui-nav>\n<ui-list> & <ui-nav> \u7c7b\u578b
1: 'singleLine'2: 'twoLine'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | \u5217\u8868\u7c7b\u578b |
nonInteractive | boolean | false | \u7981\u7528\u6c34\u6ce2\u7eb9\u6548\u679c |
dense | boolean | false | \u7d27\u51d1\u578b\u5217\u8868\u6837\u5f0f |
avatar | boolean | false | \u914d\u7f6e\u6bcf\u884c\u7684\u524d\u5bfc\u56fe\u5757\u4ee5\u663e\u793a\u56fe\u50cf\u800c\u4e0d\u662f\u56fe\u6807\u3002\u8fd9\u5c06\u4f7f\u5217\u8868\u9879\u76ee\u7684\u56fe\u5f62\u66f4\u5927\u3002 |
<ui-list> Props| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | number | -1 | \u5217\u8868\u9879\u7d22\u5f15\u503c\u3002\u4ec5\u9002\u7528\u4e8e\u5355\u9009\u6a21\u5f0f\u3002 |
singleSelection | boolean | false | \u5355\u9009\u6a21\u5f0f\u3002\u8be5\u5217\u8868\u53ef\u4ee5\u5904\u7406\u57fa\u4e8e\u5355\u51fb\u6216\u952e\u76d8\u64cd\u4f5c\u6765\u9009\u4e2d\u5217\u8868\u9879\u3002 |
| Name | Slots | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5217\u8868\u9879\u7ec4\u4ef6\u53ca HTML |
<ui-list> Events| Name | Type | Description |
|---|---|---|
update:modelValue | function(selectedIndex: number) | \u5217\u8868\u9879\u7d22\u5f15\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u5217\u8868\u9879\u7d22\u5f15\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-list v-model="selectedIndex" single-selection></ui-list>\n\u624b\u52a8
<ui-list\n :selected-index="selectedIndex"\n single-selection\n @action="balmUI.onChange('selectedIndex', $event)"\n></ui-list>\n<ui-list-group>\n <ui-list-group-subheader>1. Single-line list</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-text-content></ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>2. Two-line list</ui-list-group-subheader>\n <ui-list type="twoLine">\n <ui-item>\n <ui-item-text-content>\n <ui-item-text1></ui-item-text1>\n <ui-item-text2></ui-item-text2>\n </ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>3. Rich List</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-first-content></ui-item-first-content>\n <ui-item-text-content></ui-item-text-content>\n <ui-item-last-content></ui-item-last-content>\n </ui-item>\n </ui-list>\n</ui-list-group>\n<ui-nav>\n <ui-nav-item active>Activated item</ui-nav-item>\n <ui-nav-item>Unactivated item</ui-nav-item>\n</ui-nav>\n| Component | Description |
|---|---|
<ui-list>/<ui-nav> | \u5217\u8868\u5143\u7d20 |
<ui-item>/<ui-nav-item> | \u5217\u8868\u9879\u5143\u7d20 |
<ui-item-text-content> | \u5217\u8868\u9879\u6587\u672c\u5185\u5bb9\u5bb9\u5668\uff08\u663e\u793a\u4e3a\u5217\u8868\u9879\u7684\u4e2d\u95f4\u5217\uff09 |
<ui-item-text1> | \u5217\u8868\u9879\u7684\u4e3b\u8981\u6587\u5b57\u3002\u5e94\u8be5\u662f <ui-item-text-content> \u7684\u5b50\u5143\u7d20\u3002 |
<ui-item-text2> | \u5217\u8868\u9879\u7684\u6b21\u8981\u6587\u5b57\u3002\u663e\u793a\u5728\u4e3b\u8981\u6587\u5b57\u4e0b\u65b9\u3002\u5e94\u8be5\u662f <ui-item-text-content> \u7684\u5b50\u5143\u7d20\u3002 |
<ui-item-first-content> | \u5217\u8868\u9879\u6bcf\u884c\u7684\u7b2c\u4e00\u4e2a\u533a\u5757\u3002\u901a\u5e38\u662f\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
<ui-item-last-content> | \u5217\u8868\u9879\u6bcf\u884c\u7684\u6700\u540e\u4e00\u4e2a\u533a\u5757\u3002\u901a\u5e38\u4e3a\u5c0f\u6587\u5b57\uff0c\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
<ui-list-group> | \u5206\u7ec4\u5217\u8868\u5bb9\u5668\u3002\u4e24\u4e2a\u6216\u591a\u4e2a\u8981\u5206\u7ec4\u5728\u4e00\u8d77\u7684 <ui-list> \u5143\u7d20\u7684\u5bb9\u5668 |
<ui-list-group-subheader> | \u5206\u7ec4\u5217\u8868\u6807\u9898\u3002\u6807\u9898\u6587\u672c\u663e\u793a\u5728\u7ec4\u4e2d\u6bcf\u4e2a\u5217\u8868\u4e0a\u65b9\u3002 |
<ui-list-divider> | \u5217\u8868\u5206\u5272\u7ebf |
<ui-item-divider> | \u5217\u8868\u9879\u5206\u5272\u7ebf |
'},88217:function(t,e,o){"use strict";o.r(e);e.default='New in 9.21.0
<div v-longpress></div>\ntype LongpressConfig =\n | Function // New in 10.9.1\n | {\n callback: Function;\n delay?: number;\n };\n\u83dc\u5355\u53ef\u663e\u793a\u4e34\u7684\u9009\u9879\u5217\u8868\u3002
'},83410:function(t,e,o){"use strict";o.r(e);e.default='<ui-menu-anchor><!-- the menu component --></ui-menu-anchor>\n| Name | Type | Default | Description |
|---|---|---|---|
position | string | '' | \u8bbe\u7f6e\u83dc\u5355\u6309\u94ae\u4f4d\u7f6e\uff08\u76f8\u5bf9\u4e8e\u83dc\u5355\u951a\u70b9\uff09 |
absolute | boolean | false | \u542f\u7528\u7edd\u5bf9\u5b9a\u4f4d\uff08\u5176\u5bb9\u5668\u9700\u8981\u8bbe\u7f6e position: relative\uff09 |
interface MenuAnchor {\n position:\n | 'top left'\n | 'top right'\n | 'middle left'\n | 'middle right'\n | 'bottom left'\n | 'bottom right';\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u83dc\u5355\u7ec4\u4ef6\u53ca HTML |
<ui-menu><!-- the menuitem components --></ui-menu>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean | false | \u83dc\u5355\u72b6\u6001 |
items | array | [] | \u8bbe\u7f6e\u83dc\u5355\u9879\u5bf9\u8c61\u5217\u8868 |
quickOpen | boolean | false | \u5173\u95ed\u83dc\u5355\u6253\u5f00\u7684\u52a8\u753b |
position | string | 'TOP_LEFT' | \u8bbe\u7f6e\u83dc\u5355\u951a\u89d2\u4f4d\u7f6e\uff08\u76f8\u5bf9\u4e8e\u83dc\u5355\u6309\u94ae\uff09 |
distance | object | false | \u951a\u8fb9\u8ddd\u3002\u683c\u5f0f\uff1a{ top, right, bottom, left } |
fixed | boolean | false | \u7528\u4e8e\u6307\u5b9a\u83dc\u5355\u4f7f\u7528\u56fa\u5b9a\u4f4d\u7f6e |
fullwidth | boolean | false | \u8bbe\u7f6e\u83dc\u5355\u7684\u5bbd\u5ea6\u4ee5\u5339\u914d\u5176\u7236\u951a\u7684\u5bbd\u5ea6\uff08fixed \u6a21\u5f0f\u65e0\u6548\uff09 |
cssOnly | boolean | false | \u663e\u793a\u9759\u6001\u83dc\u5355 |
\u83dc\u5355\u9879\u5bf9\u8c61\u7684 keys:
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface Menu {\n items: Item[];\n position:\n | 'TOP_LEFT'\n | 'TOP_RIGHT'\n | 'BOTTOM_LEFT'\n | 'BOTTOM_RIGHT'\n | 'TOP_START'\n | 'TOP_END'\n | 'BOTTOM_START'\n | 'BOTTOM_END';\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u83dc\u5355\u9879\u7ec4\u4ef6\u53ca HTML |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | \u83dc\u5355\u53d8\u5316\u65f6\u89e6\u53d1 |
selected | function(menuitem: SelectedItem) | \u83dc\u5355\u9879\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 |
closed | function() | \u83dc\u5355\u5173\u95ed\u65f6\u89e6\u53d1 |
opened | function() | \u83dc\u5355\u6253\u5f00\u65f6\u89e6\u53d1 |
selected \u4e8b\u4ef6\u8fd4\u56de\u6570\u636e\uff1a
interface SelectedItem {\n index: number; // \u83dc\u5355\u9879\u7d22\u5f15\n text: string; // \u83dc\u5355\u9879\u6587\u672c\n value: string; // \u9009\u4e2d\u503c\n}\n\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u83dc\u5355\u72b6\u6001\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-menu v-model="open"></ui-menu>\n\u624b\u52a8
<ui-menu\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-menu>\n<ui-menuitem><!-- the menu item child components --></ui-menuitem>\n| Name | Type | Default | Description |
|---|---|---|---|
nested | boolean | false | \u5d4c\u5957\u83dc\u5355\u9879 <ui-menuitem> \u5f62\u6210\u4e00\u4e2a\u83dc\u5355\u9879\u7ec4 |
item | object | {} | \u8bbe\u7f6e\u83dc\u5355\u9879\u5bf9\u8c61 |
value | string, number | null | \u8bbe\u7f6e\u83dc\u5355\u9879\u7684\u503c |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
selected | boolean | false | \u9009\u4e2d\u72b6\u6001 |
\u83dc\u5355\u9879\u5bf9\u8c61\u7684 keys\uff1a
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface MenuItem {\n item: Item;\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u83dc\u5355\u9879\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-menuitem-text><ui-menuitem-icon><ui-menu-anchor>\n <ui-menu :items="menuItems"></ui-menu>\n</ui-menu-anchor>\n<ui-menu-anchor>\n <ui-menu>\n <ui-menuitem>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n\n <ui-menuitem-divider></ui-menuitem-divider>\n\n <ui-menuitem nested>\n <ui-menuitem>\n <ui-menuitem-icon>Icon</ui-menuitem-icon>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n </ui-menuitem>\n </ui-menu>\n</ui-menu-anchor>\n| Component | Description |
|---|---|
<ui-menu-anchor> | \u83dc\u5355\u951a\u5b9a\u5bb9\u5668\u5143\u7d20 |
<ui-menu> | \u83dc\u5355\u5bb9\u5668\u5143\u7d20 |
<ui-menuitem> | \u83dc\u5355\u9879 |
<ui-menuitem-text> | \u83dc\u5355\u6587\u672c |
<ui-menuitem-icon> | \u83dc\u5355\u56fe\u6807 |
<ui-menuitem-divider> | \u83dc\u5355\u9879\u5206\u5272\u7ebf\uff08\u540c <ui-item-divider>\uff09 |
New in 9.25.0
\u5e95\u90e8\u5bfc\u822a\u680f\u5141\u8bb8\u5728\u5e94\u7528\u7a0b\u5e8f\u7684\u4e3b\u8981\u76ee\u7684\u5730\u4e4b\u95f4\u79fb\u52a8\u3002
'},20684:function(t,e,o){"use strict";o.r(e);e.default='<ui-navigation-bar>\n <!-- <ui-tabs> or <ui-tab-bar> component -->\n</ui-navigation-bar>\n<ui-bottom-navigation> \u5df2\u5f03\u7528\uff0c\u8bf7\u4f7f\u7528 <ui-navigation-bar> \u4ee3\u66ff\u3002| Name | Type | Default | Description |
|---|---|---|---|
contentSelector | string | (required) | \u9009\u62e9\u5668\u7528\u4e8e\u5bf9\u5e95\u90e8\u5bfc\u822a\u680f\u4e0a\u65b9\u7684\u5185\u5bb9\u8fdb\u884c\u6837\u5f0f\u8bbe\u7f6e\uff0c\u4ee5\u9632\u6b62\u5e95\u90e8\u5bfc\u822a\u680f\u8986\u76d6\u5176\u5185\u5bb9\u3002 |
stacked | boolean | false | \u8bbe\u7f6e\u5e95\u90e8\u5bfc\u822a\u680f\u6807\u7b7e\u9875\u56fe\u6807\u548c\u6807\u7b7e\u4e3a\u5782\u76f4\u6a21\u5f0f\uff08\u9ed8\u8ba4\u4e3a\u6c34\u5e73\u6a21\u5f0f\uff09 |
min | boolean | false | \u663e\u793a 3 \u4e2a\u5bfc\u822a\u6807\u7b7e\u9875 |
max | boolean | false | \u663e\u793a 5 \u4e2a\u5bfc\u822a\u6807\u7b7e\u9875 |
<ui-pagination></ui-pagination>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | number | 1 | \u9875\u7801 | |
total | number | 0 | \u6570\u636e\u603b\u6570 | |
pageSpan | number, boolean | 3 | \u5c55\u793a\u5f53\u524d\u9875\u7801\u7684\u524d N \u9875\uff08\u6700\u5c0f\u503c\uff1a3\uff09 | |
showTotal | boolean | false | \u663e\u793a\u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df | |
pageSize | number, array | 10 | \u6bcf\u9875\u5c55\u793a\u7684\u6570\u636e\u91cf | |
pageSizeText | string, array | 'Rows per page' | \u6bcf\u9875\u6570\u636e\u91cf\u4fe1\u606f\u5c55\u793a\u7684\u524d/\u540e\u6587\u5b57 | |
ofText | string | 'of' | \u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df\u4e2d\u7684 of \u6587\u5b57 | 9.39.0 |
unitText | string | '' | \u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df\u4e2d\u7684 unit \u6587\u5b57 | 10.11.0 |
showJumper | boolean | false | \u663e\u793a\u8df3\u8f6c\u533a\u57df | |
jumperText | string, array | 'Goto' | \u8df3\u8f6c\u533a\u57df\u5c55\u793a\u7684\u524d/\u540e\u6587\u5b57 | |
jumperButtonOutlined | boolean | false | \u8df3\u8f6c\u6309\u94ae\u542f\u7528\u8f6e\u5ed3\u6309\u94ae\u6837\u5f0f | 9.11.0 |
jumperButtonText | string | '' | \u8df3\u8f6c\u6309\u94ae\u6587\u5b57 | |
position | string | '' | \u5206\u9875\u6392\u7248\u4f4d\u7f6e | |
mini | boolean | false | \u4f7f\u7528\u8ff7\u4f60\u6a21\u5f0f |
interface Pagination {\n position: 'left' | 'center' | 'right';\n}\n| Name | Props | Description | Version |
|---|---|---|---|
default | currentMinRow, currentMaxRow | \u81ea\u5b9a\u4e49\u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df | 9.3.0 |
first | \u81ea\u5b9a\u4e49\u9996\u9875\u6309\u94ae\u56fe\u6807 | ||
prev | \u81ea\u5b9a\u4e49\u4e0a\u9875\u6309\u94ae\u56fe\u6807 | ||
next | \u81ea\u5b9a\u4e49\u4e0b\u9875\u6309\u94ae\u56fe\u6807 | ||
last | \u81ea\u5b9a\u4e49\u5c3e\u9875\u6309\u94ae\u56fe\u6807 |
| Name | Type | Description | Version |
|---|---|---|---|
update:modelValue | function(page: number) | \u9875\u7801\u53d8\u5316\u65f6\u89e6\u53d1 | |
update:pageSize | function(pageInfo: object) | \u6bcf\u9875\u5c55\u793a\u6570\u53d8\u5316\u65f6\u89e6\u53d1 | 10.4.0 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u5206\u9875\u9875\u7801\u72b6\u6001\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-pagination v-model="page"></ui-pagination>\n\u624b\u52a8
<ui-pagination\n :model-value="page"\n @update:model-value="balmUI.onChange('page', $event)"\n></ui-pagination>\n\u7ebf\u6027\u8fdb\u5ea6\u6761\u901a\u8fc7\u6cbf\u56fa\u5b9a\u7684\u53ef\u89c1\u8f68\u9053\u7684\u957f\u5ea6\u8bbe\u7f6e\u6307\u793a\u5668\u52a8\u753b\u6765\u663e\u793a\u8fdb\u5ea6\u3002
'},37498:function(t,e,o){"use strict";o.r(e);e.default='<ui-progress></ui-progress>\n| Name | Type | Default | Description |
|---|---|---|---|
active | boolean | false | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u4e3a\u6d3b\u52a8\u72b6\u6001 |
progress | number | 0 | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u503c\u3002\u503c\u7684\u8303\u56f4\u4e3a [0, 1] |
buffer | number | 0 | \u8bbe\u7f6e\u7f13\u51b2\u533a\u503c\u3002\u503c\u7684\u8303\u56f4\u4e3a [0, 1] |
label | string | '' | \u8fdb\u5ea6\u6761\u8bf4\u660e\u6587\u5b57 |
closed | boolean | false | \u9690\u85cf\u8fdb\u5ea6\u6761 |
\u5355\u9009\u6309\u94ae\u5141\u8bb8\u7528\u6237\u4ece\u4e00\u7ec4\u4e2d\u9009\u62e9\u4e00\u4e2a\u9009\u9879\u3002
'},84967:function(t,e,o){"use strict";o.r(e);e.default='<ui-form-field>\n <ui-radio></ui-radio>\n <label>Radio</label>\n</ui-form-field>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | string, number | '' | \u5355\u9009\u6309\u94ae\u503c |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
value | string, number | '' | \u539f\u751f <input> \u7684 value \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
attrs | object | {} | <input> \u7684\u5176\u4ed6\u5c5e\u6027 |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: string|number) | \u5355\u9009\u6309\u94ae\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u5355\u9009\u6309\u94ae\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-radio v-model="value"></ui-radio>\n\u624b\u52a8
<ui-radio\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-radio>\n<ui-rangepicker></ui-rangepicker>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder\uff09 | |
modelValue (v-model) | array | '' | \u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\u503c | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
labels | array | [] | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff | |
placeholders | array | [] | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 | |
config | object | {} | \u8be6\u89c1 Flatpickr configuration | |
disableRangePlugin | boolean | false | \u7981\u7528 flatpickr rangePlugin\uff0c\u4f7f\u7528\u4e24\u4e2a <ui-datepicker> \u4ee3\u66ff | 10.16.0 |
| Name | Props | Description |
|---|---|---|
separator | \u81ea\u5b9a\u4e49\u5206\u9694\u7b26 |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: array) | \u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-rangepicker v-model="value"></ui-rangepicker>\n\u624b\u52a8
<ui-rangepicker\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-rangepicker>\n\u6c34\u6ce2\u7eb9\u6548\u679c\u5411\u7ec4\u4ef6\uff08\u6216\u4efb\u4f55\u5143\u7d20\uff09\u63d0\u4f9b\u5b9e\u8d28\u6027\u201c\u58a8\u6c34\u6ce2\u7eb9\u201d\u4ea4\u4e92\u6548\u679c\u3002 \u5b83\u88ab\u8bbe\u8ba1\u4e3a\u9ad8\u6548\uff0c\u65e0\u521b\u4e14\u53ef\u7528\u7684\uff0c\u800c\u65e0\u9700\u5411\u60a8\u7684\u5143\u7d20\u4e2d\u6dfb\u52a0\u4efb\u4f55\u989d\u5916\u7684 DOM\u3002
'},99735:function(t,e,o){"use strict";o.r(e);e.default='<div v-ripple></div>\n\u6ce8\u610f\uff1a\u4e0d\u652f\u6301\u52a8\u6001 class
v-ripple="color"v-ripple:cssOnly="color"| Value | Type | Default | Description |
|---|---|---|---|
color | number, string | undefined | \u8bbe\u7f6e\u6ce2\u7eb9\u989c\u8272 |
1 \u6216 'primary'2 \u6216 'secondary'v-ripple.unbounded="color"v-ripple:cssOnly.unbounded="color"\u6309\u94ae\u7ec4\u5141\u8bb8\u7528\u6237\u5207\u6362\u5206\u7ec4\u6309\u94ae\u7684\u9009\u5b9a\u72b6\u6001\u3002
'},92249:function(t,e,o){"use strict";o.r(e);e.default='New in 9.5.0
<ui-segmented-button></ui-segmented-button>\n| Name | Type | Default | Description |
|---|---|---|---|
selected | boolean | false | \u8bbe\u7f6e\u9009\u4e2d\u72b6\u6001\u6837\u5f0f |
text | string | '' | \u6309\u94ae\u6587\u5b57 |
icon | string | '' | \u6309\u94ae\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u6587\u5b57\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n| Name | Type | Description |
|---|---|---|
click | function(event: object) | \u70b9\u51fb\u6309\u94ae\u65f6\u89e6\u53d1 |
<ui-segmented-buttons :items="buttonGroupItems"></ui-segmented-buttons>\n<ui-segmented-buttons>\n <ui-segmented-button></ui-segmented-button>\n</ui-segmented-buttons>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | array, number | [] | \u9009\u4e2d\u72b6\u6001 |
items | array | [] | \u6309\u94ae\u7ec4\u5143\u7d20\u5bf9\u8c61 |
singleSelect | boolean | false | \u5355\u9009\u6a21\u5f0f |
\u6309\u94ae\u7ec4\u5143\u7d20\u5bf9\u8c61\u7684\u5173\u952e keys:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u7ec4\u7ec4\u4ef6 <ui-segmented-button> |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(selectedIndex: array | number) | \u6309\u94ae\u7ec4\u72b6\u6001\u53d8\u5316\u65f6\u89e6\u53d1 |
selected | function(index: number) | \u70b9\u51fb\u6309\u94ae\u7ec4\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u6309\u94ae\u7ec4\u72b6\u6001\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-segmented-buttons v-model="selectedIndex"></ui-segmented-buttons>\n\u624b\u52a8
<ui-segmented-buttons\n :model-value="selectedIndex"\n @update:model-value="balmUI.onChange('selectedIndex', $event)"\n></ui-segmented-buttons>\n<ui-select-helper><!-- the helper text --></ui-select-helper>\n| Name | Type | Default | Description |
|---|---|---|---|
id | string | null | \u5fc5\u586b\uff08\u53ef\u5bf9\u5e94\u5339\u914d <ui-select> \u7684 helperTextId \u5c5e\u6027\uff09 |
visible | boolean | false | \u4f7f\u5e2e\u52a9\u6587\u672c\u6c38\u8fdc\u53ef\u89c1 |
validMsg | string, boolean | false | \u9a8c\u8bc1\u6d88\u606f\u6587\u672c |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u62e9\u5668\u5e2e\u52a9\u6587\u5b57\u53ca HTML |
<ui-select-icon><!-- the material design icon name --></ui-select-icon>\n| Name | Type | Default | Description |
|---|---|---|---|
unclickable | boolean | false | \u5c55\u793a\u4e0d\u53ef\u70b9\u51fb\u7684\u6837\u5f0f |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u6807\u7ec4\u4ef6\u53ca HTML\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
| Name | Type | Description |
|---|---|---|
click | function(event: object) | \u70b9\u51fb\u9009\u62e9\u5668\u56fe\u6807\u65f6\u89e6\u53d1 |
<ui-select><!-- the label text --></ui-select>\n<ui-select> \u7c7b\u578b
0: 'filled'1: 'outlined'| Name | Type | Default | Description | Version |
|---|---|---|---|---|
type | string, number | 0 | \u9009\u62e9\u5668\u7c7b\u578b | |
outlined | boolean | false | \u8f6e\u5ed3\u9009\u62e9\u5668 | |
modelValue (v-model) | string, number | '' | \u9009\u62e9\u5668\u503c | |
options | array | [] | \u8bbe\u7f6e\u9009\u9879\u5217\u8868\uff08\u9ed8\u8ba4\u9009\u9879\u683c\u5f0f\uff1a{ label, value }\uff09 | |
optionFormat | object | { label: 'label', value: 'value' } | \u5b9a\u4e49\u9009\u9879\u5361\u9009\u9879\u6570\u636e\u683c\u5f0f | 9.34.0 |
defaultLabel | string | '' | \u9009\u9879\u5360\u4f4d\u7b26 label \u7684\u503c | |
defaultValue | string, number | '' | \u9009\u9879\u5360\u4f4d\u7b26 value \u7684\u503c | |
label | string | '' | \u9009\u62e9\u5668\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837\u5f0f | |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 | |
withLeadingIcon | boolean | false | \u542f\u7528\u9996\u56fe\u6807\u6837\u5f0f | |
helperTextId | string | null | \u5339\u914d <ui-select-helper> \u7684 id \u5c5e\u6027 | |
inside | boolean | false | \u9002\u914d\u6837\u5f0f\uff0c\u53ef\u7528\u4e8e\u67d0\u4e9b\u7ec4\u4ef6\u5185\u90e8\u7684\u6ea2\u51fa (\u5982\uff1a\u7528\u5728 <ui-dialog> \u4e2d) | 10.10.0 |
\u63d0\u793a\uff1a
withLeadingIcon\u548cwithTrailingIcon\u4ec5\u7528\u4e8e (\u975e<ui-select-icon>) \u81ea\u5b9a\u4e49\u9996/\u5c3e\u56fe\u6807\uff0c\u901a\u5e38\u65e0\u9700\u914d\u7f6e
\u26a0\ufe0f
9.34.0\u4e2doptionLabel\u548coptionValue\u5c5e\u6027\u5df2\u5f03\u7528\uff0c\u8bf7\u4f7f\u7528optionFormat\u4ee3\u66ff\u3002
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u62e9\u5668\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | |
icon | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
dropdown-icon | \u81ea\u5b9a\u4e49\u4e0b\u62c9\u56fe\u6807 |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: string|number) | \u9009\u62e9\u5668\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
selected | function(option: object) | \u9009\u62e9\u5668\u9009\u9879\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u9009\u62e9\u5668\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-select v-model="value"></ui-select>\n\u624b\u52a8
<ui-select\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-select>\n\u5f62\u72b6\u53ef\u4ee5\u5f15\u5bfc\u6ce8\u610f\u529b\uff0c\u8bc6\u522b\u7ec4\u4ef6\uff0c\u4f20\u8fbe\u72b6\u6001\u5e76\u8868\u8fbe\u54c1\u724c\u3002
'},37905:function(t,e,o){"use strict";o.r(e);e.default='<div v-shape></div>\nv-shape="corner" (medium)v-shape.small="corner"v-shape.large="corner"v-shape.cut="corner" (medium)v-shape.cut.small="corner"v-shape.cut.large="corner"| Value | Type | Default | Description |
|---|---|---|---|
| corner | string | '' | \u7528\u4e8e\u906e\u76d6\u7279\u5b9a\u89d2\u843d\u7684\u5143\u7d20\uff1b\u6700\u591a\u53ef\u80fd\u6709 4 \u4e2a\u3002\uff08\u503c\u4e3a\u7a7a\u65f6\u4f7f\u7528 shape sass radius variable\uff09 |
\u8bed\u6cd5\u7c7b\u4f3c CSS
border-radius\u5c5e\u6027
<!-- The syntax of the first corner allows one to four values -->\n<!-- Radius is set for all 4 sides -->\n<div v-shape="'4px'"></div>\n\n<!-- top-left | bottom-right -->\n<div v-shape="'4px 0'"></div>\n\n<!-- top-right | bottom-left -->\n<div v-shape="'0 4px'"></div>\n\n<!-- top-left -->\n<div v-shape="'4px 0 0'"></div>\n\n<!-- top-left | top-right | bottom-left -->\n<div v-shape="'4px 4px 0'"></div>\n\n<!-- top-left | top-right | bottom-right | bottom-left -->\n<div v-shape="'4px 4px 4px 4px'"></div>\n'},19520:function(t,e,o){"use strict";o.r(e);e.default='New in 10.19.0
<ui-side-sheet></ui-side-sheet>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean | false | \u4fa7\u8fb9\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001 |
closable | boolean | false | \u5c55\u73b0\u5173\u95ed\u6309\u94ae |
| Name | Props | Description |
|---|---|---|
title | title \u63d2\u69fd\u5305\u542b\u4fa7\u8fb9\u52a8\u4f5c\u8868\u7684\u6807\u9898\u53ca HTML | |
default | default \u63d2\u69fd\u5305\u542b\u4fa7\u8fb9\u52a8\u4f5c\u8868\u7684\u5185\u5bb9\u53ca HTML | |
actions | actions \u63d2\u69fd\u5305\u542b\u4fa7\u8fb9\u52a8\u4f5c\u8868\u7684\u52a8\u4f5c\u53ca HTML |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | \u4fa7\u8fb9\u52a8\u4f5c\u8868\u9690\u85cf\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u4fa7\u8fb9\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-side-sheet v-model="open"></ui-side-sheet>\n\u624b\u52a8
<ui-side-sheet\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-side-sheet>\n<ui-skeleton><!-- (the loaded data) --></ui-skeleton>\n| Name | Type | Default | Description |
|---|---|---|---|
loading | boolean | true | \u663e\u793a\u9aa8\u67b6\u5c4f |
active | boolean | false | \u663e\u793a\u52a8\u753b\u6548\u679c |
avatar | boolean, object | false | \u663e\u793a\u5934\u50cf\u5360\u4f4d\u7b26 |
title | boolean, object | true | \u663e\u793a\u6807\u9898\u5360\u4f4d\u7b26 |
paragraph | boolean, object | true | \u663e\u793a\u5185\u5bb9\u5360\u4f4d\u7b26 |
interface Skeleton {\n avatar: {\n size: 'large' | 'small' | number; // \u8bbe\u7f6e\u5934\u50cf\u5c3a\u5bf8\n shape: 'circle' | 'square'; // \u8bbe\u7f6e\u5934\u50cf\u5f62\u72b6\n };\n title: {\n width: string; // \u8bbe\u7f6e\u6807\u9898\u5bbd\u5ea6\n };\n paragraph: {\n width: string; // \u8bbe\u7f6e\u5185\u5bb9\u5bbd\u5ea6\n rows: number; // \u8bbe\u7f6e\u5185\u5bb9\u884c\u6570\n };\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u4efb\u610f\u7ec4\u4ef6\u53ca HTML |
\u6ed1\u52a8\u6761\u5141\u8bb8\u7528\u6237\u4ece\u4e00\u7cfb\u5217\u503c\u4e2d\u8fdb\u884c\u9009\u62e9\u3002
'},55324:function(t,e,o){"use strict";o.r(e);e.default='<ui-slider></ui-slider>\n<ui-slider> \u7c7b\u578b
0: 'continuous'1: 'discrete'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | \u6ed1\u52a8\u6761\u7c7b\u578b |
discrete | boolean | false | \u5c06\u6ed1\u52a8\u6761\u6837\u5f0f\u8bbe\u7f6e\u4e3a\u79bb\u6563\u6ed1\u52a8\u6761 |
withTickMarks | boolean | false | \u79bb\u6563\u6ed1\u52a8\u6761\u652f\u6301\u8f68\u9053\u4e0a\u7684\u663e\u793a\u6807\u8bb0 |
modelValue (v-model) | number, array | 0 | \u6ed1\u52a8\u6761\u503c\uff08array \u503c\u8868\u793a\u4e3a\u8303\u56f4\u6ed1\u52a8\u6761\uff09 |
min | number | 0 | \u6ed1\u52a8\u6761\u53ef\u4ee5\u5177\u6709\u7684\u6700\u5c0f\u503c |
max | number | 100 | \u6ed1\u52a8\u6761\u53ef\u4ee5\u5177\u6709\u7684\u6700\u5927\u503c |
step | number | 1 | \u8bbe\u7f6e\u6ed1\u52a8\u6761\u503c\u7684\u589e\u91cf |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: number|array) | \u5f53\u7528\u6237\u505c\u6b62\u62d6\u52a8\u6ed1\u5757\u6216\u6ed1\u52a8\u6761\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u6ed1\u52a8\u6761\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-slider v-model="value"></ui-slider>\n\u624b\u52a8
<ui-slider\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-slider>\n\u9488\u5bf9\u67d0\u4e9b\u5f02\u6b65\u6570\u636e\u7684\u60c5\u51b5
<ui-slider ref="slider" v-model="value"></ui-slider>\n$refs.slider.recompute()\uff1a\u91cd\u65b0\u5e03\u5c40\u5e95\u90e8\u6d88\u606f\u6846\u5728\u5c4f\u5e55\u5e95\u90e8\u63d0\u4f9b\u6709\u5173\u5e94\u7528\u7a0b\u5e8f\u8fc7\u7a0b\u7684\u7b80\u77ed\u6d88\u606f\u3002
'},12615:function(t,e,o){"use strict";o.r(e);e.default='<ui-snackbar><!-- the message text --></ui-snackbar>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
actionType | number | 0 | \u8bbe\u7f6e\u5e95\u90e8\u6d88\u606f\u6846\u7684\u52a8\u4f5c\u7c7b\u578b\uff080: \u52a8\u4f5c\u6309\u94ae, 1: \u5173\u95ed\u56fe\u6807\uff09 | |
modelValue (v-model) | boolean | false | \u5e95\u90e8\u6d88\u606f\u6846\u663e\u793a\u72b6\u6001 | |
timeoutMs | number | 5000 | \u81ea\u52a8\u5173\u95ed\u7684\u8d85\u65f6\u65f6\u95f4\uff08\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\uff09\u3002\u503c\u5fc5\u987b\u5728 4000 \u548c 10000 \u4e4b\u95f4\uff0c\u5426\u5219\u4f1a\u5f15\u53d1\u9519\u8bef\u3002 | |
message | string | '' | \u6d88\u606f\u6587\u672c | |
actionButtonText | string | '' | \u64cd\u4f5c\u6309\u94ae/\u56fe\u6807\u5143\u7d20\uff08\u5982\u679c\u5b58\u5728\uff09 | |
stacked | boolean | false | \u5c06\u64cd\u4f5c\u6309\u94ae/\u56fe\u6807\u653e\u5728\u6d88\u606f\u4e0b\u65b9\u800c\u4e0d\u662f\u65c1\u8fb9 | |
leading | boolean | false | \u5c06\u5e95\u90e8\u6d88\u606f\u6846\u653e\u7f6e\u5728\u5c4f\u5e55\u7684\u524d\u7aef\uff08\u5728 LTR \u4e2d\u4e3a\u5de6\uff0c\u5728 RTL \u4e2d\u4e3a\u53f3\uff09\uff0c\u800c\u4e0d\u662f\u5c45\u4e2d\u3002\uff08\u4ec5\u9650\u5e73\u677f\u7535\u8111\u548c\u53f0\u5f0f\u673a\uff09 | |
position | string | 'bottom' | \u8bbe\u7f6e\u5e95\u90e8\u6d88\u606f\u6846\u7684\u4f4d\u7f6e | 9.21.0 |
interface Snackbar {\n position: 'bottom' | 'center' | 'top';\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6d88\u606f\u6587\u672c\u53ca HTML | |
action | actionClass | \u81ea\u5b9a\u4e49\u52a8\u4f5c\u6309\u94ae |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(open: boolean) | \u5e95\u90e8\u6d88\u606f\u6846\u9690\u85cf\u65f6\u89e6\u53d1 |
closed | function() | \u5e95\u90e8\u6d88\u606f\u6846\u5173\u95ed\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u5e95\u90e8\u6d88\u606f\u6846\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-snackbar v-model="open"></ui-snackbar>\n\u624b\u52a8
<ui-snackbar\n :model-value="open"\n @update:model-value="balmUI.onChange('open', $event)"\n></ui-snackbar>\n<ui-spinner></ui-spinner>\n| Name | Type | Default | Description |
|---|---|---|---|
active | boolean | false | \u542f\u7528\u52a0\u8f7d\u4e2d\u72b6\u6001 |
progress | number | 0 | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u7684\u503c\u3002\u503c\u5e94\u4ecb\u4e8e [0, 1] \u4e4b\u95f4\u3002 |
size | string | 'large' | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u5c3a\u5bf8 |
fourColored | boolean | false | \u542f\u7528 4 \u79cd\u989c\u8272\u5faa\u73af |
label | string | '' | \u8fdb\u5ea6\u6761\u7684\u6807\u7b7e |
closed | boolean | false | \u9690\u85cf\u8fdb\u5ea6\u6761 |
\u5c3a\u5bf8\u503c\uff1a
interface Spinner {\n size: 'large' | 'L' | 'medium' | 'M' | 'small' | 'S';\n}\n\u4e00\u79cd\u66f4\u7b80\u5355\u7684\u72b6\u6001\u7ba1\u7406\u6a21\u5f0f\u3002
'},61684:function(t,e,o){"use strict";o.r(e);e.default='// `/path/to/app/scripts/store/index.js`\nimport useDemoStore from './demo';\n\nexport default {\n ...useDemoStore()\n};\n// `/path/to/app/scripts/store/demo.js`\nimport { reactive, toRefs } from 'vue';\nimport { useHttp } from '@/plugins/http'; // \u4f8b\u5982 axios\n\nconst state = reactive({\n demoMenu: []\n});\n\nasync function getDemoMenu() {\n const $http = useHttp();\n state.demoMenu = await $http.get('/api/get-menu');\n}\n\nconst useDemoStore = () => {\n return {\n ...toRefs(state),\n getDemoMenu\n };\n};\n\nexport default useDemoStore;\nComposition API
<ui-button @click="store.getDemoMenu">Test</ui-button>\n<ui-divider></ui-divider>\n{{ store.demoMenu }}\nimport { onBeforeMount } from 'vue';\nimport { useStore } from 'balm-ui';\n\nexport default {\n setup() {\n const store = useStore();\n\n onBeforeMount(() => {\n store.getDemoMenu();\n });\n\n return {\n store\n };\n }\n};\nOptions API
<ui-button @click="$store.getDemoMenu">Test</ui-button>\n<ui-divider></ui-divider>\n{{ $store.demoMenu }}\nexport default {\n beforeMount() {\n this.$store.getDemoMenu();\n }\n};\n\u5f00\u5173\u5c06\u5355\u4e2a\u8bbe\u7f6e\u7684\u72b6\u6001\u5207\u6362\u4e3a\u6253\u5f00\u6216\u5173\u95ed\u3002\u5b83\u4eec\u662f\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u8c03\u6574\u8bbe\u7f6e\u7684\u9996\u9009\u65b9\u6cd5\u3002
'},41503:function(t,e,o){"use strict";o.r(e);e.default='<ui-form-field>\n <ui-switch></ui-switch>\n <label>Switch</label>\n</ui-form-field>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | boolean | false | \u5f00\u5173\u72b6\u6001 |
trueValue | boolean, number, string | true | \u5f00\u5173\u5f00\u542f\u65f6\u7684\u8fd4\u56de\u503c |
falseValue | boolean, number, string | false | \u5f00\u5173\u5173\u95ed\u65f6\u7684\u8fd4\u56de\u503c |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
| Name | Type | Description |
|---|---|---|
update:modelValue | function(value: boolean) | \u5f00\u5173\u72b6\u6001\u53d8\u5316\u65f6\u89e6\u53d1 |
selected | function(value: boolean|string|number) | \u5f00\u5173\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u5f00\u5173\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-switch v-model="value"></ui-switch>\n\u624b\u52a8
<ui-switch\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-switch>\n\u6570\u636e\u8868\u663e\u793a\u884c\u548c\u5217\u4e4b\u95f4\u7684\u6570\u636e\u96c6\u3002
'},57989:function(t,e,o){"use strict";o.r(e);e.default='<ui-table></ui-table>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
data | array | [] | \u6570\u636e\u6e90 | |
thead | array | [] | \u6570\u636e\u8868\u5934\u90e8\u6e32\u67d3\u683c\u5f0f | |
tbody | array | [] | \u6570\u636e\u8868\u5185\u5bb9\u6e32\u67d3\u683c\u5f0f | |
tfoot | array | [] | \u6570\u636e\u8868\u5e95\u90e8\u6e32\u67d3\u683c\u5f0f | |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
rowCheckbox | boolean | false | \u5e26\u6709\u884c\u9009\u62e9\u7684\u6570\u636e\u8868 | |
rowCheckboxDisabled | function, boolean | false | \u6392\u9664\u9009\u4e2d\u884c\u7684\u6570\u636e | 10.9.0 |
modelValue (v-model) | array | [] | \u9009\u62e9\u884c\u7684\u7d22\u5f15\u6216 IDs\uff08\u5fc5\u987b\u8bbe\u7f6e rowCheckbox: true\uff09 | |
selectedKey | boolean, string | false | selectedRows \u4f7f\u7528\u81ea\u5b9a\u4e49\u952e\u5b57\u6bb5\uff0c\u9ed8\u8ba4\u4f7f\u7528\u884c\u7d22\u5f15\u3002 | |
rowIdPrefix | string | '' | \u5728\u884c\u5143\u7d20 <tr> \u4e0a\u7684 data-row-id \u5c5e\u6027\u503c\u7684\u524d\u7f00 | |
sortIconAlignEnd | boolean | false | \u8bbe\u7f6e\u6392\u5e8f\u56fe\u6807\u4f4d\u4e8e\u6807\u7b7e\u4e4b\u540e | |
showProgress | boolean | false | \u542f\u7528\u6570\u636e\u8868\u8fdb\u5ea6\u6307\u793a\u5668\u8868\u793a\u52a0\u8f7d\u6570\u636e\u4e2d | 9.7.0 |
fixedHeader | boolean | false | \u6570\u636e\u8868\u5934\u90e8\u56fa\u5b9a\u6a21\u5f0f | 9.7.0 |
defaultColWidth | number | 0 | \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u6bcf\u5217\u7684\u9ed8\u8ba4\u5bbd\u5ea6 | 9.7.0 |
scroll | object | { x: false, y: false } | \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u5bb9\u5668\u7684\u5927\u5c0f | 9.7.0 |
thead & tbody & tfoot \u5c5e\u6027\u901a\u7528\u683c\u5f0f
interface TableCell {\n value: string; // \u5355\u5143\u683c\u5185\u5bb9\n numeric: boolean; // \u6570\u5b57\u5355\u5143\u683c\u5c45\u53f3\u663e\u793a\uff08\u76f8\u5f53\u4e8e `align: 'right'`\uff09\n align: 'left' | 'center' | 'right';\n class: string; // \u81ea\u5b9a\u4e49 class\n slot: string; // \u81ea\u5b9a\u4e49\u63d2\u69fd\n}\nthead \u683c\u5f0f
\u9ed8\u8ba4\uff08string[]\uff09
[\n 'ID',\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n];\n\u81ea\u5b9a\u4e49\uff08object[] \u6216 object[][]\uff09
interface Thead {\n sort: 'none' | 'asc' | 'desc'; // \u6392\u5e8f\n columnId: string; // \u6392\u5e8f\u5b57\u6bb5\uff1a\u4f8b\u5982 'id'\n rowspan: number;\n colspan: number;\n}\n[\n [\n {\n value: 'ID',\n rowspan: 2,\n sort: 'asc',\n columnId: 'id'\n },\n {\n value: 'Type1',\n colspan: 2,\n align: 'center'\n },\n {\n value: 'Type2',\n colspan: 3,\n align: 'center'\n },\n {\n value: 'Actions',\n rowspan: 2\n }\n ],\n [\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n ]\n];\ntbody \u683c\u5f0f
\u9ed8\u8ba4\uff08string[]\uff09
['id', 'dessert', 'calories', 'fat', 'carbs', 'protein'];\n\u81ea\u5b9a\u4e49\uff08object[]\uff09
interface Tbody {\n field: string; // \u6570\u636e\u5b57\u6bb5\u540d\n fn: function; // \u7b80\u5355\u7684\u6570\u636e\u5904\u7406\n colClass: string; // <col> \u5143\u7d20\u7684 class (New in 9.7.0)\n fixed: 'left' \uff5c 'right'; // \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u4e2d\u5355\u5143\u683c\u7684\u4f4d\u7f6e (New in 9.7.0)\n width: number; // \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u4e2d\u5355\u5143\u683c\u7684\u5bbd\u5ea6 (New in 9.7.0)\n}\n[\n 'id',\n 'dessert',\n {\n field: 'calories',\n numeric: true,\n class: 'my-data'\n },\n {\n field: 'fat',\n fn: (data) => {\n return data.fat.toFixed(1);\n }\n },\n 'carbs',\n {\n field: 'protein',\n class: (data) => {\n return data.protein > 5 ? 'red' : 'green';\n }\n },\n {\n slot: 'actions'\n }\n];\n<ui-table>\n <template #actions="{ data }">\n <ui-icon @click="show(data)">description</ui-icon>\n <ui-icon @click="edit(data)">edit</ui-icon>\n <ui-icon @click="remove(data)">delete</ui-icon>\n </template>\n</ui-table>\ntfoot \u683c\u5f0f\uff08object[]\uff09
interface Tfoot {\n fnName: 'count' | 'sum' | 'avg' | 'max' | 'min'; // \u5e38\u7528\u7edf\u8ba1\u65b9\u6cd5\n fn: function; // \u7b80\u5355\u7684\u6570\u636e\u7ed3\u679c\u5904\u7406\n slot: string; // \u81ea\u5b9a\u4e49\u63d2\u69fd\n}\nfnName \u65b9\u6cd5\uff1acount, sum, avg, max, min
[\n {\n field: 'id',\n fnName: 'count'\n },\n null,\n {\n field: 'calories',\n fnName: 'sum'\n },\n {\n field: 'fat',\n fnName: 'avg'\n },\n {\n field: 'carbs',\n fnName: 'max'\n },\n {\n field: 'protein',\n fnName: 'min'\n }\n];\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5206\u9875\u7ec4\u4ef6\u53ca HTML | |
(custom-name) | \u5355\u5143\u683c\u81ea\u5b9a\u4e49\u63d2\u69fd |
| Name | Type | Description | Version |
|---|---|---|---|
update:modelValue | function(selectedRows: array) | \u9009\u62e9\u884c\u53d8\u5316\u65f6\u89e6\u53d1 | |
sorted | function(detail: object) | \u70b9\u51fb\u53ef\u6392\u5e8f\u8868\u5934\u65f6\u89e6\u53d1 | 10.16.0 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u6570\u636e\u8868\u9009\u62e9\u884c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-table v-model="selectedRows" row-checkbox></ui-table>\n\u624b\u52a8
<ui-table\n :model-value="selectedRows"\n row-checkbox\n @update:model-value="balmUI.onChange('selectedRows', $event)"\n></ui-table>\n\u6807\u7b7e\u9875\u8de8\u4e0d\u540c\u7684\u5c4f\u5e55\uff0c\u6570\u636e\u96c6\u548c\u5176\u4ed6\u4ea4\u4e92\u6765\u7ec4\u7ec7\u5185\u5bb9\u3002
'},16483:function(t,e,o){"use strict";o.r(e);e.default='<ui-tab-bar><!-- the tab components --></ui-tab-bar>\n<ui-tab-bar> & <ui-tabs> \u5171\u7528 Props| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | number | 0 | \u6807\u7b7e\u9875\u7d22\u5f15\u503c |
<ui-tab-bar> Slots| Name | Slots | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u7ec4\u4ef6\u53ca HTML |
<ui-tab-bar> & <ui-tabs> \u5171\u7528 Events| Name | Type | Description |
|---|---|---|
update:modelValue | function(activeIndex: number) | \u6807\u7b7e\u9875\u7d22\u5f15\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u9009\u9879\u5361\u7d22\u5f15\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-tab-bar v-model="activeIndex"></ui-tab-bar>\n<!-- \u6216 -->\n<ui-tabs v-model="activeIndex"></ui-tabs>\n\u624b\u52a8
<ui-tab-bar\n :model-value="activeIndex"\n @update:model-value="balmUI.onChange('activeIndex', $event)"\n></ui-tab-bar>\n<!-- \u6216 -->\n<ui-tabs\n :model-value="activeIndex"\n @update:model-value="balmUI.onChange('activeIndex', $event)"\n></ui-tabs>\n<ui-tab-indicator></ui-tab-indicator>\n| Name | Type | Default | Description |
|---|---|---|---|
type | string | 'underline' | \u6807\u7b7e\u9875\u6307\u793a\u5668\u7c7b\u578b |
fade | boolean | false | \u6de1\u5165\u6de1\u51fa\u6548\u679c |
interface TabIndicator {\n type: 'underline' | 'icon';\n}\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6307\u793a\u5668\u81ea\u5b9a\u4e49\u56fe\u6807 \u53ca HTML |
'},17663:function(t,e,o){"use strict";o.r(e);e.default='\u63d0\u793a\uff1a
underline\u7c7b\u578b\u6ca1\u6709 slot
<ui-panels>\n <!-- the panel components -->\n <ui-panel><!-- the panel content --></ui-panel>\n</ui-panels>\n| Name | Type | Default | Description |
|---|---|---|---|
modelValue (v-model) | number | 0 | \u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u7d22\u5f15 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u9762\u677f\u7ec4\u4ef6\u53ca HTML |
<ui-tabs v-model="active">\n <ui-tab>Tab One</ui-tab>\n <ui-tab>Tab Two</ui-tab>\n <ui-tab>Tab Three</ui-tab>\n</ui-tabs>\n\n<ui-panels v-model="active">\n <ui-panel>Panel One</ui-panel>\n <ui-panel>Panel Two</ui-panel>\n <ui-panel>Panel Three</ui-panel>\n</ui-panels>\n<ui-tab-scroller><!-- the tab components --></ui-tab-scroller>\n| Name | Type | Default | Description |
|---|---|---|---|
scrollX (v-model:scrollX) | number | 0 | \u5f53\u524d\u7684\u6eda\u52a8\u503c |
align | string | '' | <ui-tabs> \u5171\u7528\u5c5e\u6027\u3002\u6807\u7b7e\u9875\u5bf9\u9f50\u65b9\u5f0f\u3002 |
interface TabScroller {\n align: 'start' | 'center' | 'end';\n}\n| Name | Slots | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u7ec4\u4ef6\u53ca HTML |
| Name | Type | Description |
|---|---|---|
update:scrollX | function(scrollX: number) | \u6eda\u52a8\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
<ui-tab-scroller ref="scroller" v-model:scrollX="value"></ui-tab-scroller>\n$refs.scroller.increment(scrollX: number)<ui-tab><!-- The tab text label --></ui-tab>\n<ui-tab> & <ui-tabs> \u7c7b\u578b
0: 'text'1: 'iconOnly'2: 'textWithIcon'<ui-tab> & <ui-tabs> \u5171\u7528 Props| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | \u6807\u7b7e\u9875\u7c7b\u578b\uff08\u6392\u5217\u65b9\u5f0f\uff09 |
stacked | boolean | false | \u8bbe\u7f6e\u6807\u7b7e\u9875\u56fe\u6807\u548c\u6807\u7b7e\u4e3a\u5782\u76f4\u6a21\u5f0f\uff08\u9ed8\u8ba4\u4e3a\u6c34\u5e73\u6a21\u5f0f\uff09 |
minWidth | boolean | false | \u8bbe\u7f6e\u6807\u7b7e\u9875\u7684\u5927\u5c0f\u5e94\u7f29\u5c0f\u5230\u5c3d\u53ef\u80fd\u7a84\u800c\u4e0d\u5f15\u8d77\u6587\u672c\u6362\u884c |
contentIndicator | boolean | false | \u6807\u7b7e\u6587\u672c\u5bbd\u5ea6\u5339\u914d\u6307\u793a\u5668 |
<ui-tab> Props| Name | Type | Default | Description |
|---|---|---|---|
text | string | '' | \u6807\u7b7e\u6587\u672c |
icon | string | '' | \u6807\u7b7e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u6587\u672c \u53ca HTML | |
icon | iconClass | \u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u56fe\u6807 |
indicator | \u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u6307\u793a\u5668 |
<ui-tab>\n <template #icon="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-tab>\n<ui-tabs></ui-tabs>\n<ui-tabs> Props| Name | Type | Default | Description |
|---|---|---|---|
items | array | [] | \u8bbe\u7f6e\u6807\u7b7e\u9875\u5bf9\u8c61\u5217\u8868 |
\u6807\u7b7e\u9875\u5bf9\u8c61\u7684 keys:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n<ui-tabs> Slots| Name | Slots | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u7ec4\u4ef6\u53ca HTML |
<!-- Full syntax -->\n<ui-tab-bar v-model="active">\n <ui-tab\n v-for="(tabItem, tabIndex) in items"\n :key="tabIndex"\n :icon="tabItem.icon"\n >\n {{ tabItem.text }}\n </ui-tab>\n</ui-tab-bar>\n\n<!-- Shorthand -->\n<ui-tabs v-model="active" :items="items"></ui-tabs>\n<ui-tabs :items="tabItems"></ui-tabs>\n<ui-tab-bar>\n <ui-tab>\n Tab Text\n <template #indicator>\n <ui-tab-indicator></ui-tab-indicator>\n </template>\n </ui-tab>\n</ui-tab-bar>\n\n<ui-panels>\n <ui-panel></ui-panel>\n</ui-panels>\n| Component | Description |
|---|---|
<ui-tabs> | <ui-tab-bar> \u548c <ui-tab> \u7684\u7f29\u5199 |
<ui-tab-bar> | \u6807\u7b7e\u9875\u5bb9\u5668 |
<ui-tab> | \u6807\u7b7e\u9875 |
<ui-panels> | \u6807\u7b7e\u9875\u9762\u677f\u5bb9\u5668 |
<ui-panel> | \u6807\u7b7e\u9875\u9762\u677f |
<ui-tab-indicator> | \u5305\u542b\u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u6307\u793a\u5668\u7684\u5185\u5bb9 |
<ui-tab-scroller> | \u5305\u542b\u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u6eda\u52a8\u5668\u7684\u5185\u5bb9 |
\u6587\u672c\u6846\u4f7f\u7528\u6237\u53ef\u4ee5\u8f93\u5165\u548c\u7f16\u8f91\u6587\u672c\u3002
'},81963:function(t,e,o){"use strict";o.r(e);e.default='<ui-textfield-helper><!-- the helper text --></ui-textfield-helper>\n| Name | Type | Default | Description |
|---|---|---|---|
id | string | null | \u5fc5\u586b\uff08\u53ef\u5bf9\u5e94\u5339\u914d <ui-textfield> \u7684 helperTextId \u5c5e\u6027\uff09 |
visible | boolean | false | \u4f7f\u5e2e\u52a9\u6587\u672c\u6c38\u8fdc\u53ef\u89c1 |
withCounter | boolean | false | \u542f\u7528\u8ba1\u6570\u5668\uff08\u9700\u8981\u914d\u7f6e <ui-textfield> \u7684 maxlength \u5c5e\u6027\uff09 |
validMsg | string, boolean | false | \u9a8c\u8bc1\u6d88\u606f\u6587\u672c |
\u63d0\u793a\uff1a\u8bf7\u4e0d\u8981\u5728
<ui-textfield>\u548c\u542f\u7528\u8ba1\u6570\u5668\u7684<ui-textfield-helper>\u4e4b\u524d\u63d2\u5165\u4efb\u4f55\u6807\u7b7e
<!-- Single line text field -->\n<ui-form-field>\n <ui-textfield maxlength="40"></ui-textfield>\n <ui-textfield-helper with-counter></ui-textfield-helper>\n</ui-form-field>\n\n<!-- Single line text field with an internal character counter -->\n<ui-form-field>\n <ui-textfield maxlength="40" with-counter></ui-textfield>\n</ui-form-field>\n| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u5e2e\u52a9\u6587\u5b57\u53ca HTML |
<ui-textfield-icon><!-- the material design icon name --></ui-textfield-icon>\n| Name | Type | Default | Description |
|---|---|---|---|
trailing | boolean | false | \u5c55\u793a\u4ee5\u5c3e\u56fe\u6807\u7684\u6837\u5f0f |
unclickable | boolean | false | \u5c55\u793a\u4e0d\u53ef\u70b9\u51fb\u7684\u6837\u5f0f |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u6807\u7ec4\u4ef6\u53ca HTML\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
| Name | Type | Description |
|---|---|---|
click | function(event: object) | \u70b9\u51fb\u6587\u672c\u6846\u56fe\u6807\u65f6\u89e6\u53d1 |
<ui-textfield><!-- the label text --></ui-textfield>\n<ui-textfield> \u7c7b\u578b
0: 'filled'1: 'outlined'| Name | Type | Default | Description |
|---|---|---|---|
type | string, number | 0 | \u6587\u672c\u6846\u7c7b\u578b |
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder\uff09 |
modelValue (v-model) | string, number | '' | \u6587\u672c\u6846\u503c |
inputType | string | 'text' | \u539f\u751f <input> \u7c7b\u578b\uff1atext, number, password, \u7b49 |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
label | string | '' | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff |
placeholder | string | null | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837\u5f0f |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f |
endAligned | boolean | false | \u8f93\u5165\u6587\u672c\u53f3\u5bf9\u9f50 |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
withLeadingIcon | boolean | false | \u542f\u7528\u9996\u56fe\u6807\u6837\u5f0f |
withTrailingIcon | boolean | false | \u542f\u7528\u5c3e\u56fe\u6807\u6837\u5f0f |
prefixText | string | '' | \u8bbe\u7f6e\u6587\u672c\u524d\u7f00\u5185\u5bb9 |
suffixText | string | '' | \u8bbe\u7f6e\u6587\u672c\u540e\u7f00\u5185\u5bb9 |
withCounter | boolean | false | \u542f\u7528\u5185\u90e8\u8ba1\u6570\u5668 |
helperTextId | string | null | \u5339\u914d <ui-textfield-helper> \u7684 id \u5c5e\u6027 |
attrs | object | {} | <input> \u6216 <textarea> \u7684\u5176\u4ed6\u5c5e\u6027 |
\u63d0\u793a\uff1a
withLeadingIcon\u548cwithTrailingIcon\u4ec5\u7528\u4e8e (\u975e<ui-textfield-icon>) \u81ea\u5b9a\u4e49\u9996/\u5c3e\u56fe\u6807\uff0c\u901a\u5e38\u65e0\u9700\u914d\u7f6e
\u9664\u4e0a\u8ff0\u5185\u5bb9\u5916\uff0c\u4ee5\u4e0b\u5c5e\u6027\u8fd8\u53ef\u4ee5\u66ff\u4ee3\u5177\u6709\u76f8\u540c\u540d\u79f0\u7684 input \u6216 textarea \u5143\u7d20\u7684\u5c5e\u6027\uff1a
patternminlengthmaxlength\uff1a\u8ba1\u6570\u5668\u5fc5\u5907\u5c5e\u6027minmaxsteprowscols| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
| Name | Type | Description |
|---|---|---|
focus | function(event: object) | \u6587\u672c\u6846\u805a\u7126\u65f6\u89e6\u53d1 |
keydown | function(event: object) | \u6587\u672c\u6846\u4e2d\u6309\u4e0b\u952e\u76d8\u65f6\u89e6\u53d1 |
update:modelValue | function(value: string) | \u6587\u672c\u6846\u4e2d\u8f93\u5165\u5185\u5bb9\u65f6\u89e6\u53d1 |
change | function(event: object) | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
enter | function(value: string) | \u6587\u672c\u6846\u4e2d\u6309\u4e0b Enter \u952e\u76d8\u65f6\u89e6\u53d1 |
blur | function(event: object) | \u6587\u672c\u6846\u5931\u53bb\u805a\u7126\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u6587\u672c\u6846\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-textfield v-model="value"></ui-textfield>\n\u624b\u52a8
<ui-textfield\n :model-value="value"\n @update:model-value="balmUI.onChange('value', $event)"\n></ui-textfield>\n<ui-form-field>\n <ui-textfield maxlength="20">\n <template #before>\n <ui-textfield-icon>event</ui-textfield-icon>\n </template>\n Floating Label Text\n <template #after>\n <ui-textfield-icon trailing>delete</ui-textfield-icon>\n </template>\n </ui-textfield>\n <ui-textfield-helper with-counter> Helper message </ui-textfield-helper>\n</ui-form-field>\n| Component | Description |
|---|---|
<ui-textfield> | \u6587\u672c\u6846\u5143\u7d20 |
<ui-textfield-icon> | \u6587\u672c\u6846\u9996/\u5c3e\u56fe\u6807\u5143\u7d20 |
<ui-textfield-helper> | \u5e2e\u52a9\u6587\u672c\u548c\u5b57\u7b26\u8ba1\u6570\u5668\u5143\u7d20 |
$theme
interface VueInstance {\n $theme: BalmUITheme;\n}\n$theme.primary
$theme.secondary
$theme.background
$theme.surface
$theme.error
$theme.onPrimary
$theme.onSecondary
$theme.onSurface
$theme.onError
interface BalmUITheme {\n primary: string;\n secondary: string;\n background: string;\n surface: string;\n error: string;\n onPrimary: string;\n onSecondary: string;\n onSurface: string;\n onError: string;\n}\n$theme.colors
type ThemeColor = {\n primary?: string;\n secondary?: string;\n background?: string;\n surface?: string;\n error?: string;\n on-primary?: string;\n on-secondary?: string;\n on-surface?: string;\n on-error?: string;\n}\n\ninterface BalmUITheme {\n colors: ThemeColor;\n}\n$theme.getThemeColor(style)
type ThemeColorStyle =\n | 'primary'\n | 'secondary'\n | 'background'\n | 'surface'\n | 'error'\n | 'on-primary'\n | 'on-secondary'\n | 'on-surface'\n | 'on-error';\n\ninterface BalmUITheme {\n getThemeColor(style: ThemeColorStyle): string;\n}\n$theme.getThemeClass(style)
type ThemeClassStyle = ThemeColorStyle | 'primary-bg' | 'secondary-bg';\n\ninterface BalmUITheme {\n getThemeClass(style: ThemeClassStyle): string;\n}\ntype TextStyle = 'primary' | 'secondary' | 'hint' | 'disabled' | 'icon';\n\ntype ThemeTone = 'background' | 'light' | 'dark';\n\u83b7\u53d6\u6587\u5b57\u989c\u8272\u503c/class
interface BalmUITheme {\n getTextColor(style: TextStyle, tone: ThemeTone): string;\n getTextClass(style: TextStyle, tone: ThemeTone): string;\n}\n\u8bbe\u7f6e\u6587\u5b57\u989c\u8272
interface BalmUITheme {\n setTextColor(style: TextStyle, value: string): void;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
style | string | '' | \u6587\u5b57\u6837\u5f0f\u540d |
tone | string | 'background' | \u4e3b\u9898\u8272\u8c03\u540d |
value | string | '' | \u6587\u5b57\u989c\u8272\u503c |
\u83b7\u53d6\u6587\u5b57\u989c\u8272\u503c/class
interface BalmUITheme {\n getTextColorOnLight(style: TextStyle): string;\n getTextClassOnLight(style: TextStyle): string;\n\n getTextColorOnDark(style: TextStyle): string;\n getTextClassOnDark(style: TextStyle): string;\n}\n\u8bbe\u7f6e\u6587\u5b57\u989c\u8272
interface BalmUITheme {\n setTextColorOnLight(style: TextStyle, value: string): void;\n setTextColorOnDark(style: TextStyle, value: string): void;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
style | string | '' | \u6587\u5b57\u6837\u5f0f\u540d |
value | string | '' | \u6587\u5b57\u989c\u8272\u503c |
.vue \u7ec4\u4ef6\u4e2d\u4f7f\u7528 $themeimport { useTheme } from 'balm-ui';\n// \u6216\n// import { useTheme } from 'balm-ui/plugins/theme';\n\nconst $theme = useTheme();\n$toast(message)
$toast(options)
type ToastMessage = string;\n\ninterface ToastOptions {\n className?: string;\n timeoutMs?: number;\n message: ToastMessage;\n position?: 'bottom' | 'center' | 'top';\n}\n\ninterface VueInstance {\n $toast(options: ToastMessage | ToastOptions): Promise<void>;\n}\n| Option | Type | Default | Description | Version |
|---|---|---|---|---|
className | string | '' | \u81ea\u5b9a\u4e49\u77ed\u6d88\u606f\u63d0\u793a\u7684 class | |
timeoutMs | number | 2750 | \u81ea\u52a8\u5173\u95ed\u7684\u8d85\u65f6\u65f6\u95f4\uff08\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\uff09\u3002\u503c\u5fc5\u987b\u5728 2000 \u548c 3500 \u4e4b\u95f4\uff0c\u5426\u5219\u4f1a\u5f15\u53d1\u9519\u8bef\u3002 | |
message | string | '' | \u77ed\u6d88\u606f\u6587\u672c | |
position | string | 'bottom' | \u77ed\u6d88\u606f\u63d0\u793a\u7684\u4f4d\u7f6e | 9.21.0 |
.vue \u7ec4\u4ef6\u4e2d\u4f7f\u7528 $toastimport { useToast } from 'balm-ui';\n// \u6216\n// import { useToast } from 'balm-ui/plugins/toast';\n\nconst $toast = useToast();\n$toast('Hello BalmUI');\n\u5f53\u7528\u6237\u5c06\u9f20\u6807\u60ac\u505c\uff0c\u805a\u7126\u6216\u70b9\u51fb\u67d0\u4e2a\u5143\u7d20\u65f6\uff0c\u6587\u5b57\u63d0\u793a\u5c06\u663e\u793a\u4fe1\u606f\u4e30\u5bcc\u7684\u6587\u672c\u3002
'},8361:function(t,e,o){"use strict";o.r(e);e.default='<ui-tooltip> \u7c7b\u578b
0: 'plain'
<div aria-describedby="tooltip-id">Text</div>\n<ui-tooltip id="tooltip-id">Tips content</ui-tooltip>\n1: 'rich' (New in 9.18.0)
<ui-tooltip-anchor>\n <div data-tooltip-id="tooltip-id">Text</div>\n <ui-tooltip id="tooltip-id" rich>Tips content</ui-tooltip>\n</ui-tooltip-anchor>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
type | string, number | 0 | \u6587\u5b57\u63d0\u793a\u7684\u7c7b\u578b | 9.18.0 |
rich | boolean | false | \u53ef\u9009\u3002\u542f\u7528\u5bcc\u6587\u5b57\u63d0\u793a | 9.18.0 |
width | number | 0 | \u81ea\u5b9a\u4e49\u6587\u5b57\u63d0\u793a\u7ec4\u4ef6\u7684\u6700\u5927\u5bbd\u5ea6 |
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u5b57\u63d0\u793a\u7684\u5185\u5bb9\uff08\u53ef\u5305\u542b HTML\uff09 |
| Name | Props | Description |
|---|---|---|
title | title \u63d2\u69fd\u5305\u542b\u6587\u5b57\u63d0\u793a\u7684\u6807\u9898\uff08\u53ef\u5305\u542b HTML\uff09 | |
default | linkClass | default \u63d2\u69fd\u5305\u542b\u6587\u5b57\u63d0\u793a\u7684\u5185\u5bb9\uff08\u53ef\u5305\u542b HTML\uff09 |
<div v-tooltip="'plain tips'" aria-describedby="tooltip-id"></div>\n\u9876\u90e8\u5bfc\u822a\u680f\u663e\u793a\u4e0e\u5f53\u524d\u5c4f\u5e55\u6709\u5173\u7684\u4fe1\u606f\u548c\u64cd\u4f5c\u3002
'},67479:function(t,e,o){"use strict";o.r(e);e.default='<ui-top-app-bar><!-- the application title --></ui-top-app-bar>\n<ui-top-app-bar> \u7c7b\u578b
0: 'standard'1: 'fixed'2: 'dense'3: 'prominent'4: 'prominentDense'5: 'short'6: 'shortCollapsed'-1: 'nonRegular'| Name | Type | Default | Description |
|---|---|---|---|
contentSelector | string | (required) | \u9009\u62e9\u5668\u7528\u4e8e\u8bbe\u7f6e\u9876\u90e8\u5bfc\u822a\u680f\u4e0b\u65b9\u5185\u5bb9\u7684\u6837\u5f0f\uff0c\u4ee5\u9632\u6b62\u9876\u90e8\u5bfc\u822a\u680f\u8986\u76d6\u5185\u5bb9\u3002 |
type | string, number | 0 | \u9876\u90e8\u5bfc\u822a\u680f\u7c7b\u578b |
fixed | boolean | false | \u56fa\u5b9a\u7684\u9876\u90e8\u5bfc\u822a\u680f\u4f4d\u4e8e\u9875\u9762\u9876\u90e8\uff0c\u5e76\u4e14\u5728\u6eda\u52a8\u65f6\u4f4d\u4e8e\u5185\u5bb9\u4e0a\u65b9\u3002 |
dense | boolean | false | \u5bc6\u96c6\u7684\u9876\u90e8\u5bfc\u822a\u680f\u8f83\u77ed\u3002 |
prominent | boolean | false | \u7a81\u51fa\u7684\u9876\u90e8\u5bfc\u822a\u680f\u8f83\u9ad8\u3002 |
prominentDense | boolean | false | \u7a81\u51fa\u4e14\u5bc6\u96c6\u7684\u9876\u90e8\u5bfc\u822a\u680f |
short | boolean | false | \u9876\u90e8\u77ed\u5bfc\u822a\uff0c\u6eda\u52a8\u65f6\u53ef\u4ee5\u6298\u53e0\u5230\u5bfc\u822a\u56fe\u6807\u7684\u4e00\u4fa7\u3002 |
shortCollapsed | boolean | false | \u8bbe\u7f6e\u9876\u90e8\u77ed\u5bfc\u822a\u59cb\u7ec8\u663e\u793a\u6298\u53e0\u72b6\u6001\u3002 |
title | string | '' | \u8bbe\u7f6e\u5bfc\u822a\u6807\u9898 |
navIcon | string, boolean | 'menu' | \u8bbe\u7f6e\u5bfc\u822a\u56fe\u6807 |
navId | string | null | \u4fa7\u8fb9\u5bfc\u822a\u680f\u7684\u5143\u7d20 ID\uff08\u8bf7\u53c2\u8003 drawer \u7684 navId \u5c5e\u6027\uff09 |
\u9876\u90e8\u77ed\u5bfc\u822a\u5e94\u4e0e\u6700\u591a 1 \u4e2a\u52a8\u4f5c\u9879\u4e00\u8d77\u4f7f\u7528\u3002
| Name | Props | Description |
|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bfc\u822a\u6807\u9898\u53ca HTML | |
nav-icon | navIconClass | \u81ea\u5b9a\u4e49\u5bfc\u822a\u56fe\u6807 |
toolbar | toolbarItemClass | toolbar \u63d2\u69fd\u5305\u542b\u52a8\u4f5c\u9879\u76ee\u53ca HTML |
<template #toolbar="{ toolbarItemClass }">\n <ui-icon-button :class="toolbarItemClass" icon="ICON"></ui-icon-button>\n</template>\n| Name | Type | Description |
|---|---|---|
nav | function() | \u70b9\u51fb\u5bfc\u822a\u9ed8\u8ba4\u56fe\u6807\u65f6\u89e6\u53d1 |
close | function() | \u70b9\u51fb\u5bfc\u822a\u5173\u95ed\u56fe\u6807\u65f6\u89e6\u53d1\uff08\u4ec5\u9650 navIcon \u8bbe\u7f6e\u4e3a close \u65f6\uff09 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u6ca1\u6709\u8054\u5408\u4f7f\u7528\u9876\u90e8\u5bfc\u822a\u680f\u548c\u4fa7\u8fb9\u5bfc\u822a\u680f\u7684
navId\u5c5e\u6027\u7ed1\u5b9a\u4e24\u8005\u5173\u7cfb\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@nav\u76d1\u542c\u9876\u90e8\u5bfc\u822a\u680f\u5e76\u66f4\u65b0\u4fa7\u8fb9\u5bfc\u822a\u680f\u7684v-model\u5c5e\u6027
\u81ea\u52a8
<ui-top-app-bar nav-id="demo-menu"></ui-top-app-bar>\n<ui-drawer nav-id="demo-menu" type="modal"></ui-drawer>\n\u624b\u52a8
<ui-top-app-bar @nav="balmUI.onChange('open', !open)"></ui-top-app-bar>\n<ui-drawer v-model="open" type="modal"></ui-drawer>\n'},22498:function(t,e,o){"use strict";o.r(e);e.default='New in 9.16.0
<ui-tree></ui-tree>\n| Name | Type | Default | Description | Version |
|---|---|---|---|---|
modelValue (v-model) | string, number, array | '' | \u9009\u4e2d\u7684\u6811\u8282\u70b9\u952e\u503c | |
filterParentNode | boolean | false | \u9009\u4e2d\u7684\u6811\u8282\u70b9\u952e\u503c\u8fc7\u6ee4\u6240\u6709\u7236\u8282\u70b9 | 10.17.0 |
data | array | [] | \u6e90\u6570\u636e | |
dataFormat | object | {} | \u5b9a\u4e49\u6e90\u6570\u636e\u7684\u683c\u5f0f | |
maxLevel | number | 0 | \u8bbe\u7f6e\u52a0\u8f7d\u6811\u8282\u70b9\u7684\u6700\u5927\u5c42\u7ea7 | |
multiple | boolean | false | \u662f\u5426\u652f\u6301\u9009\u5b9a\u7684\u591a\u4e2a\u6811\u8282\u70b9 | |
singleChecked | boolean | false | \u542f\u7528\u6811\u8282\u70b9\u5355\u8282\u70b9\u9009\u62e9\u3002\u4ec5\u9488\u5bf9 multiple \u6811\u8282\u70b9\u6709\u6548\u3002 | 9.34.0 |
loadData | function | null | \u542f\u7528\u5f02\u6b65\u52a0\u8f7d\u6570\u636e | |
autoExpandParent | boolean | false | \u662f\u5426\u81ea\u52a8\u5c55\u5f00\u6839\u7236\u7ea7\u6811\u8282\u70b9 | 9.17.0 |
autoExpandSelected | boolean | false | \u662f\u5426\u81ea\u52a8\u5c55\u5f00\u624b\u52a8\u8d4b\u503c\u9009\u62e9\u7684\u6811\u8282\u70b9\u548c\u5b83\u7684\u7236\u7ea7\u6811\u8282\u70b9 | 10.21.0 |
autoExpandAll | boolean | false | \u662f\u5426\u81ea\u52a8\u5c55\u5f00\u6240\u6709\u6811\u8282\u70b9 | 10.21.0 |
defaultExpandedKeys | array | [] | \u6307\u5b9a\u9ed8\u8ba4\u5c55\u5f00\u7684\u6811\u8282\u70b9\u7684\u8282\u70b9\u503c | 9.17.0 |
\u9ed8\u8ba4\u6570\u636e\u683c\u5f0f
{\n label: 'label',\n value: 'value', // nodeKey\n children: 'children',\n hasChildren: 'hasChildren',\n isLeaf: 'isLeaf',\n disabled: 'disabled' // New in 9.35.0\n}\n\u5f02\u6b65\u52a0\u8f7d\u6570\u636e
type TreeNodes = { [key: string]: any }[];\n\ninterface Tree {\n loadData(nodeKey: string | number): TreeNodes;\n}\n| Name | Props | Description | Version |
|---|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6811\u9876\u90e8\u680f\u5185\u5bb9\u53ca HTML | ||
expand-more-icon | \u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807 | ||
expand-less-icon | \u81ea\u5b9a\u4e49\u6536\u8d77\u56fe\u6807 | ||
before | data | before \u63d2\u69fd\u5305\u542b\u6811\u8282\u70b9\u7684\u81ea\u5b9a\u4e49\u4fe1\u606f\u53ca HTML | 9.32.0 |
title | data | title \u63d2\u69fd\u5305\u542b\u6811\u8282\u70b9\u7684\u6807\u9898\u53ca HTML | |
after | data | after \u63d2\u69fd\u5305\u542b\u6811\u8282\u70b9\u7684\u81ea\u5b9a\u4e49\u52a8\u4f5c\u53ca HTML |
Rename slot
toactionafterin9.32.0
| Name | Type | Description | Version |
|---|---|---|---|
update:modelValue | function(selectedNodes: string | array, selectedEvent: object) | \u6811\u8282\u70b9\u503c\u53d8\u5316\u65f6\u89e6\u53d1 | |
selected | function(selectedNodesData: string | array) | \u6811\u8282\u70b9\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 | 9.34.0 |
9.35.0 \u4e2d@change\u4e8b\u4ef6\u65b0\u589eselectedEvent\u53c2\u6570
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@update:modelValue\u76d1\u542c\u6811\u8282\u70b9\u503c\u5e76\u66f4\u65b0modelValue\u5c5e\u6027
\u81ea\u52a8
<ui-tree v-model="selectedNodes"></ui-tree>\n\u624b\u52a8
<ui-tree\n :model-value="selectedNodes"\n @update:model-value="balmUI.onChange('selectedNodes', $event)"\n></ui-tree>\n\u64cd\u4f5c\u6811\u8282\u70b9 (New in 9.31.0)
<ui-tree ref="tree"></ui-tree>\n$refs.tree.updateNode(type: 'create' | 'update' | 'delete', parentKey: string | number, nodeData: object)\n\n$refs.tree.getNode(nodeKey: string): object\nMaterial Design \u6392\u7248\u8bbe\u8ba1\u4e86\u6587\u672c\u5927\u5c0f\u548c\u6837\u5f0f\uff0c\u4ee5\u5728\u5178\u578b\u4f7f\u7528\u6761\u4ef6\u4e0b\u5e73\u8861\u5185\u5bb9\u5bc6\u5ea6\u548c\u9605\u8bfb\u8212\u9002\u5ea6\u3002
'},91283:function(t,e,o){"use strict";o.r(e);e.default='$tt(style)
type TypographyStyle =\n | 'headline1'\n | 'headline2'\n | 'headline3'\n | 'headline4'\n | 'headline5'\n | 'headline6'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'caption'\n | 'button'\n | 'overline'\n | string;\n\ninterface VueInstance {\n $tt(style: TypographyStyle): string;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
style | string | '' | \u6392\u7248\u6837\u5f0f\u540d\u6216\u81ea\u5b9a\u4e49\u6837\u5f0f class |
MDC Web \u9ed8\u8ba4\u63d0\u4f9b\u4e86 13 \u79cd\u6837\u5f0f\uff1a
| Style | Description |
|---|---|
headline1 | \u6807\u9898 1\uff0c\u5c4f\u5e55\u4e0a\u6700\u5927\u7684\u6587\u672c\uff0c\u4fdd\u7559\u7b80\u77ed\uff0c\u91cd\u8981\u7684\u6587\u672c\u6216\u6570\u5b57 |
headline2 | \u6807\u9898 2 |
headline3 | \u6807\u9898 3 |
headline4 | \u6807\u9898 4 |
headline5 | \u6807\u9898 5 |
headline6 | \u6807\u9898 6 |
subtitle1 | \u526f\u6807\u9898 1\uff0c\u6bd4\u6807\u9898\u5c0f\uff0c\u4fdd\u7559\u7ed9\u957f\u5ea6\u8f83\u77ed\u7684\u4e2d\u5f3a\u8c03\u6587\u5b57 |
subtitle2 | \u526f\u6807\u9898 2 |
body1 | \u4e3b\u4f53\u5185\u5bb9 1\uff0c\u7528\u4e8e\u957f\u7bc7\u5199\u4f5c |
body2 | \u4e3b\u4f53\u5185\u5bb9 2 |
caption | \u6ce8\u91ca\u6587\u5b57 |
button | \u6309\u94ae\u6587\u5b57 |
overline | \u8bf4\u660e\u6587\u5b57 |
\u4f60\u53ef\u4ee5\u5f88\u5bb9\u6613\u4e3a\u4f60\u7684\u9879\u76ee\u91cd\u5199\u6392\u7248\u6837\u5f0f\uff08CSS Classes\uff09
.vue \u7ec4\u4ef6\u4e2d\u4f7f\u7528 $ttimport { useTypography } from 'balm-ui';\n// \u6216\n// import { useTypography } from 'balm-ui/plugins/typography';\n\nconst $tt = useTypography();\nconsole.log($tt('custom-style-1'));\n\u9ed8\u8ba4\u7528\u6cd5
import { types } from 'balm-ui';\n\u72ec\u7acb\u7528\u6cd5
import types from 'balm-ui/utils/types';\n\u65b9\u6cd5
types.getType(any): string;\n\ntypes.isUndefined(value): boolean;\ntypes.isNull(value): boolean;\ntypes.isBoolean(value): boolean;\ntypes.isNumber(value): boolean;\ntypes.isString(value): boolean;\ntypes.isSymbol(value): boolean;\ntypes.isObject(value): boolean;\ntypes.isArray(value): boolean;\ntypes.isFunction(value): boolean;\n\u72ec\u7acb\u7528\u6cd5
import { helpers } from 'balm-ui';\n\u72ec\u7acb\u7528\u6cd5
import helpers from 'balm-ui/utils/helpers';\n\u65b9\u6cd5
helpers.isEmpty(value): boolean;\n\nhelpers.jsonEqual(jsonA, jsonB): boolean; // \u5c5e\u6027\u7684\u987a\u5e8f\u5f88\u91cd\u8981\nhelpers.isDeepEqual(obj1, obj2): boolean;\n\nhelpers.merge(target: object, source: object): object;\nhelpers.merge.all(arrayOfObjects: object[]): object;\n\n// New in 9.28.0\nhelpers.toCamelCase(str: string): string;\nhelpers.toCapitalize(str: string): string;\nisEmpty \u4ee5\u4e0b\u503c\u88ab\u8ba4\u4e3a\u662f\u7a7a\u503c\uff1aundefinednullfalse0'''0'{}[]map or set\u72ec\u7acb\u7528\u6cd5
import { detectIE } from 'balm-ui';\n\u72ec\u7acb\u7528\u6cd5
import detectIE from 'balm-ui/utils/ie';\n\u65b9\u6cd5
detectIE(): number | false;\nIE \u6d4f\u89c8\u5668\u8fd4\u56de\u7248\u672c\u53f7\uff0c\u5176\u4ed6\u6d4f\u89c8\u5668\u8fd4\u56de
false
New in 10.23.0
\u9ed8\u8ba4\u7528\u6cd5
import { ban } from 'balm-ui';\n\u72ec\u7acb\u7528\u6cd5
import ban from 'balm-ui/utils/ban';\n\u65b9\u6cd5
ban(): void;\nimport { useValidator } from 'balm-ui';\n// \u6216\n// import { useValidator } from 'balm-ui/plugins/validator';\n\nconst validator = useValidator();\n\u9a8c\u8bc1\u65b9\u6cd5
interface BalmUIValidator {\n validate(\n formData: { [fieldName: string]: any },\n customFieldset?: string[]\n ): BalmUIValidationResult;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
formData | object | {} | \u4e00\u7ec4\u8868\u5355\u6570\u636e\u5bf9\u8c61 |
customFieldset | array | [] | \u53ef\u9009\u3002\u9700\u8981\u9a8c\u8bc1\u7684\u5b57\u6bb5\u540d\u79f0\u3002 |
\u9a8c\u8bc1\u7ed3\u679c
interface BalmUIValidationResult {\n valid: boolean;\n validFields: string[];\n invalidFields: string[];\n message: string;\n messages: string[];\n validMsg: { [fieldName: string]: string };\n}\n| Result | Type | Description |
|---|---|---|
valid | boolean | \u9a8c\u8bc1\u7ed3\u679c |
validFields | array | \u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5 |
invalidFields | array | \u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5 |
message | string | \u7b2c\u4e00\u4e2a\u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5\u63d0\u793a\u8bed |
messages | array | \u6240\u6709\u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5\u63d0\u793a\u8bed |
validMsg | object | \u63d0\u793a\u8bed\u5bf9\u8c61\u5316\uff08\u683c\u5f0f\u7c7b\u4f3c formData\uff09 |
\u63d0\u793a\uff1a
validMsg\u53ef\u4ee5\u914d\u5408<ui-textfield-helper>/<ui-select-helper>\u4e00\u8d77\u4f7f\u7528\u6765\u89e6\u53d1<ui-textfield>/<ui-select>\u9519\u8bef\u63d0\u793a\u7684\u6837\u5f0f
\u9a8c\u8bc1\u89c4\u5219
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\u26a0\ufe0f \u4e0d\u652f\u6301
<script setup>
// \u81ea\u5b9a\u4e49\u5c40\u90e8\u9a8c\u8bc1\u89c4\u5219\nconst validations = [\n {\n key: 'fieldName1',\n label: 'Field Label',\n validator: 'required, customRule1',\n customRule1: {\n validate(fieldValue, formData) {\n // \u9a8c\u8bc1\u65b9\u6cd5\n return true;\n },\n message: '%s is required' // '%s' \u7b26\u53f7\u5c06\u81ea\u52a8\u66ff\u6362 label \u7684\u6587\u672c\n }\n // \u66f4\u591a\u81ea\u5b9a\u4e49\u89c4\u5219\n // customRule2: { ... }\n }\n // \u66f4\u591a\u8868\u5355\u5b57\u6bb5\n // {\n // key: 'fieldName2',\n // validator: 'required'\n // }\n];\nComposition API
import { reactive, toRefs } from 'vue';\nimport { useValidator } from 'balm-ui';\n\n// const validations = [...]\n\nconst state = reactive({\n formData: {\n fieldName1: '',\n fieldName2: ''\n }\n});\n\nexport default {\n setup() {\n const validator = useValidator();\n\n function onSubmit() {\n const {\n valid,\n validFields,\n invalidFields,\n message,\n messages,\n validMsg\n } = validator.validate(state.formData);\n }\n\n return {\n validations,\n ...toRefs(state),\n onSubmit\n };\n }\n};\nOptions API
import { useValidator } from 'balm-ui';\n\n// const validations = [...]\n\nexport default {\n data() {\n return {\n validator: useValidator(),\n validations,\n formData: {\n fieldName1: '',\n fieldName2: ''\n }\n };\n },\n methods: {\n onSubmit() {\n const {\n valid,\n validFields,\n invalidFields,\n message,\n messages,\n validMsg\n } = this.validator.validate(this.formData);\n }\n }\n};\n// New in 9.15.0\ninterface BalmUIValidator {\n clear(): void;\n get(fieldName?: string): BalmUIValidationRule[] | BalmUIValidationRule; // \u663e\u793a\u5f53\u524d\u5df2\u8bbe\u7f6e\u7684\u9a8c\u8bc1\u89c4\u5219\n set(fieldName: string, validationRule: BalmUIValidationRule): void;\n set(validations: BalmUIValidationRule[]): void;\n}\n| Param | Type | Default | Description |
|---|---|---|---|
fieldName | string | '' | formData \u7684\u4e00\u4e2a\u5b57\u6bb5\u540d\u79f0\uff08BalmUI \u9a8c\u8bc1\u5668\u89c4\u5219\u7684 key\uff09 |
validation | object | {} | \u4e00\u4e2a\u9a8c\u8bc1\u89c4\u5219\uff08BalmUI \u9a8c\u8bc1\u5668\u89c4\u5219\u7684 value\uff09 |
validations | object | [] | \u8be6\u89c1\u4e0a\u65b9 BalmUI \u9a8c\u8bc1\u5668\u89c4\u5219 |
computedimport { useValidator } from 'balm-ui';\n\nexport default {\n data() {\n return {\n validator: useValidator(),\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n computed: {\n validations() {\n return this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n }\n },\n methods: {\n onSubmit() {\n let result = this.validator.validate(this.formData);\n // ...\n }\n }\n};\ncustomFieldsetimport { useValidator } from 'balm-ui';\n\nconst validations = [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n];\n\nexport default {\n data() {\n return {\n validator: useValidator(),\n validations,\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n methods: {\n onSubmit() {\n let customFieldset = this.step === 1 ? ['username'] : ['password'];\n let result = this.validator.validate(this.formData, customFieldset);\n // ...\n }\n }\n};\nvalidator.set \u8bbe\u7f6e\u81ea\u5b9a\u4e49\u9a8c\u8bc1\u89c4\u5219import { useValidator } from 'balm-ui';\n\nexport default {\n data() {\n return {\n validator: useValidator(),\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n }\n },\n methods: {\n onSubmit() {\n let customValidations =\n this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n this.validator.set(customValidations);\n\n let result = this.validator.validate(this.formData);\n // ...\n }\n};\nRecommended Choice\uff1aChrome
\n