4.0.4 • Published 5 months ago

@jaaahn/hyper-ui v4.0.4

Weekly downloads
118
License
MIT
Repository
-
Last release
5 months ago

Table of Contents

Welcome to HyperUI

Welcome to HyperUI, a personal Vue 3 component library fitting my needs.

HyperUI aims on being an easy to use, opinionated component library for Vue 3. It provides components and the necessary building blocks to design web apps, but unlike other libraries does not provide excessive customizability. HyperUI supports automatic darkmode based on the users system preferences.

As this library is a personal project, it does not come with a lot of customization options, but in this documentation there are some tips on how to customize the design using CSS. If you think like there is something off with your design, then feel encouraged to use CSS to tweak it the way you like it.

Licensed under MIT License.

Attention Breaking Changes

Upgrading to Version 4.0.0

We provide an upgrade script that can migrate your project mostly from v3 to v4. This script can only update attribute, prop and css variable changes. Any syntax upgrades will have to be performed by you.

$ npx -p @jaaahn/hyper-ui upgrade-v3-to-v4

When running, the script will prompt you for a directory. It will migrate any file within that directory. Use version control to go over changes and inspect your codebase after migration for any damage that the migration script might have caused.

The following paragraphs detail all the changes made in this release.
Any points marked with [x] can be done by the migration script. Any changes marked with [ ] have to be manually migrated.

Renamed props for a more consistent experience

AutoComponentOLDNEWNotes
[x]HyButtontype-->variant
[x]HyDropdownborder-->showBorder
[x]HyHeaderextendHeadline-->doExtendHeadline
[ ]HyModalhideScrollbars-->showScrollbars!!! inverted behaviour
[ ]HyModaldisableSwipeToClose-->swipeToCloseEnabled!!! inverted behaviour
[ ]HyModaldisableDismiss-->dismissible!!! inverted behaviour
[ ]HySmartMenuhideScrollbars-->showScrollbars!!! inverted behaviour
[ ]HySmartMenudisableSwipeToClose-->swipeToCloseEnabled!!! inverted behaviour
[ ]HySmartMenudisableDismiss-->dismissible!!! inverted behaviour
[x]HySmartMenutype-->variant
[x]HyPopoverhover-->doOpenOnHover
[x]HyPopovertype-->variant
[x]HySectionborder-->showBorder
[x]HySectiondividers-->showDividers
[x]HySelectDropdownenableSearch-->showSearch
[x]HySelectDropdownborder-->showBorder
[x]HyTableborder-->showBorder
[x]HyTabbartype-->variant!!! Renamed option "blue" to "primary"

Renamed element variants

AutoOLDNEWNotes
[x]transparent-->ghost
[x]transparent-bg-->ghost-bg
[x]light-blue-->ghost-blue
[x]light-bg-blue-->ghost-bg-blue
[x]light-red-->ghost-red
[x]light-bg-red-->ghost-bg-red
[x]light-orange-->ghost-yellow!!! renamed "orange" to "yellow"
[x]light-bg-orange-->ghost-bg-yellow!!! renamed "orange" to "yellow"
[x]light-green-->ghost-green
[x]light-bg-green-->ghost-bg-green

Renamed size options

AutoOLDNEWNotes
[x]normal-->lgStill the default
[x]light-->md
[x]thin-->sm

Prefixed CSS Variables

[x] We prefixed all CSS variables with --hy-. The migration script can upgrade all of these.

Changed some CSS variable names regarding naming element variants naming scheme

[x] Some css variable names have changed to align more with the updated element variants.

Changes in HyPopovers and HySmartMenus including their "Free" variants

[ ]

We rewrote the HyPopover component leading to a breaking interface change regarding it and HySmartMenu.

Going forward, all HyPopovers work like the old HyPopoverFree (apart from prop name changes). This means, the reference element is now passed via a prop instead of inlining it with the use of a slot.

Consider this code:

<hy-popover v-model="isOpen">
    <template #element>
        <hy-button @click="..."> ... </hy-button>
    </template>

    <template #content>
        Popover content
    </template>
</hy-popover

This code would now be:

<hy-button id="targetButton" @click="..."> ... </hy-button>

<hy-popover reference="#targetButton" v-model="isOpen"> Popover content </hy-popover>

Please notice the changes we did to the code:

  • Added an id attribute to the target element
  • Moved the target element out of the popover (allowing us to get rid of the <template>s)
  • Added the reference attribute with a query selector string for selecting the target element

HyPopovers inherits from its predecessor HyPopoverFree the ability to directly accept HTMLElements.

These changes also mean, we updated how SmartMenus work and removed the HyPopoversFree and HySmartMenuFree components.
For more information, please read the docs for HyPopovers and HySmartMenus.

Upgrading to Version 3.0.0:

We refined the naming scheme of this library. Please search your codebase for these classes and replace them with:

OLDNEW
reset-->hy-reset
--font-color-similar-->--hy-font-color-match
same-->match (only affects HyPopover, HyPopoverFree, HySmartMenu and HySmartMenuFree)

We also changed targeting classes and utility classes to fit this new naming scheme. We strongly incourage you to use the new syntax. With this syntax, every class now matches its corresponding component name:

OLDNEW
hyper-button-->hy-button
hyper-checkbox-->hy-checkbox
hyper-dropzone-->hy-dropzone
hyper-flexcontainer-->hy-flex-container
hyper-header-->hy-header
hyper-input-->hy-input
hyper-listicon-->hy-list-icon
hyper-loader-->hy-loader
hyper-main-->hy-main
hyper-modal-->hy-modal
hyper-navigationcontainer-->hy-navigation-container
hyper-navigationsidebar-->hy-navigation-sidebar
hyper-navigationtabbar-->hy-navigation-tabbar
hyper-popover-->hy-popover
hyper-popoverfree-->hy-popover-free
hyper-progressbar-->hy-progress-bar
hyper-radiobutton-->hy-radio-button
hyper-section-->hy-section
hyper-select-->hy-select
hyper-smartmenu-->hy-smart-menu
hyper-smartmenufree-->hy-smart-menu-free
hyper-subsection-->hy-sub-section
hyper-tabbar-->hy-tabbar
hyper-table-->hy-table
hyper-textarea-->hy-text-area
hyper-toggle-->hy-toggle

Upgrading to Version 2.0.0:

  • New component naming scheme -> Please refer to the component documentation
  • Styles now need to be imported manually -> Please refer to the Import Section

Install and Initialize

Installing

From a CND

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@jaaahn/hyper-ui/dist/hyper-ui.iife.js"></script>

This will expose the global variable HyperUI which can be used to install the library: app.use(HyperUI, config).
Importing styles is not required if importing from a CDN.

Via NPM

npm install @jaaahn/hyper-ui

Initializing the library

// Standard Vue Code
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
// Standard Vue Code above
// #######################

// See below for config options; these can be omitted
let config = {
    theme: "system",
    // size: "lg",
    // variant: "ghost-bg-blue",
};

import HyperUI from "@jaaahn/hyper-ui";
app.use(HyperUI, config); // config is optional and can be omitted

import "@jaaahn/hyper-ui/styles"; // Import styles !IMPORTANT!

// #######################
// Standard Vue Code below
app.mount("#app");

This is all you need. Now you can use these components within your template. You don't need to import them in each file and you also don't need to put them within you components object in your Vue instance as you would do it with your own custom components.

Config

HyperUI allows you to change its behaviour by providing a config.
This config is a JS object passed to the app.use(...) function as the second argument (see import). But, passing this is completely optional and the config can just be omitted if one does not want to change the libraries behaviour.

Config options

Name TypeDefaultAvailable optionsExtra info
themeString"system"system, light, dark"system" will choose light- or darkmode depending on the users system preferences
sizeString"lg"Size optionOnly on supported elements
variantStringcomponent specificSee element variantsOnly on supported elements
brandThemeObjectClassic HyperUI color schemeView guide

Preparing your HTML file

If you are planning on using the included HyHeader component, please add these theme-color meta tags to your html head:

<meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)" />

<meta name="theme-color" content="#191c1f" media="(prefers-color-scheme: dark)" />

If you are NOT planning on using the Header, then add the following to your html head:

<meta name="theme-color" content="#eeeef2" media="(prefers-color-scheme: light)" />

<meta name="theme-color" content="#0c0c0e" media="(prefers-color-scheme: dark)" />

Core concepts

The following pages will explain some of the core concepts of this library.

Brand themes

Brand themes are HyperUI's way of managing a color palette. If your app requires specific brand colors, brand themes allow you to fully customize available colors and element variants.

Components will use the colors specified in your brand theme to compute their color/variant options.

The brandTheme object can be passed when initializing the library. If you omit this, HyperUI will use it's own colors.

The brandTheme object has two entries:

brandTheme: {
    colors: {
        ...
    },
    accentColor: "...",
},

In the colors object, list all colors you want the application to have. You may use any color format supported by CSS.

Then, please select an accentColor by using the name of the color.

If you need an example, please look at Classic HyperUI Brand Theme

Classic HyperUI brand theme

brandTheme: {
    colors: {
        blue: "hsl(222, 100%, 61%)",
        pink: "hsl(340, 82%, 49%)",
        yellow: "hsl(44, 97%, 50%)",
        green: "hsl(116, 45%, 54%)",
        red: "hsl(0, 76%, 58%)",
        "light-blue": "hsl(205, 100%, 62%)",
        purple: "hsl(321, 62%, 46%)",
    },
    accentColor: "blue", // Choose a color from the colors object
},

This means, the following colors are available: "blue", "pink", "yellow", "green", "red", "light-blue", "purple". The accent (primary) color is "blue".

Element variants

On supported elements, these variants are available.

Option nameResultNotes
primaryPrimary action button style featuring the blue accent colorOnly available on HyButton
secondarySecondary action button, matches the background color
ghostButton with only text. Has hover and click effect. 
ghost-bgButton with text and a slightly visible gray background. Has hover and click effect. 

Additionally, all colors of your selected brand theme become available as "solid", "ghost" and "ghost-bg" element variants.

An example: If you have a color called "green", then these variants will be made available: green, ghost-green and ghost-bg-green.

The size option

Currently, the size option supports lg, md and sm. This option can be set individually for each element or via HyperUI config globally.

Component Documentation

On the following pages we want to list all included components as well as provide examples and demos.

Component names can be written in Camel Case with the first letter also capitalized, like HyFlexContainer or HyButton. Alternatively you can also write the components in lowercase syntax like hy-flex-container or hy-button.

Mind you: If passing a non string to a prop, you need to use v-bind:PROPNAME. Otherwise you will get a warning in your console.

HyButton Component

Basic <button> element. It comes in two colors, can be disabled and put into a loading state.

Targeting class

hy-button

Slot

Pass a slot which will be displayed as the normal <button> text.

Options

NameTypeDefaultAvailable optionsRequiredExtra info
variantString"secondary"primary, secondary, ghost, ...See available variants
sizeString"lg"lg, md, smSize Option Docs
loadingBooleanfalseFor spinner: leave progress = null. For progress bar: set loading = true and provide a progress value between 0-1
progressNumbernullRange between 0-1. Values not in this range will be caped
progressWidthString"min(calc(100% - 2 * var(--hy-element-padding)), 200px)"Specify a width (in css syntax)
disabledBooleanfalse
extendBooleantrueControls whether the element extends to 100% or stays at max-content. Deprecated, use .hy-extend-full instead.

Example

<!-- Loading with spinner -->
<hy-button @click="method('hello')" :disabled="false" :loading="isLoading" variant="primary"> Click me </hy-button>

<!-- Loading with progress -->
<hy-button @click="method('hello')" :disabled="false" :loading="isLoading" :progress="loadingProgress" variant="primary">
    Click me
</hy-button>

Note: Target a specific style of button

Every HyButton component is a <button> nested inside a <div> element (see Re-Styling Components). The specific styles (controlled by the variant option) are applied to the <button> element by a class, which matches the variants's name. So, if you want to change the background-color of every ghost button, you could use something like:

.hy-button :deep(button.ghost) {
    background-color: yellow !important;
}

/* :deep() is explained in the "Re-Style Components" section */

HyCheckbox Component

Standard checkbox. It can be disabled. Use v-model to create a two-way binding.

Targeting class

hy-checkbox

v-model

Syncs whether the box is ticked or not with your parent vue instance. View the Info about v-model section for more details.

Slot

Use the slot to pass text which will be displayed as a label.

Options

NameTypeDefaultAvailable optionsRequiredExtra info
modelValueBooleanRequiredTwo-way binding for the checkbox's value
disabledBooleanfalse
extendBooleantrueControls wether the element extends to 100% or stays at max-content. Not recommended, use .hy-extend-full instead.
typeString"left"left, rightAligns either label and box left, or label on the left and box on the right

Example

<hy-checkbox v-model="someBooleanVariable" :disabled="disabledVariable" type="right"> Click me </hy-checkbox>

HyDropdown Component

An expanding menu. The menu floats above other content (and thus is not an inline element) but remains visually attached. It therefore is the mid-ground between a popover and an expandable section.

Targeting class

hy-dropdown

Slot

NameIs also the default slotRequiredExtra info
contentYesRequiredThe content to display in the menu
titleNoIf you don't want to use the title prop, you may use this slot. Note: additional styling of the element might be necessary.
iconNo

Options

NameTypeDefaultAvailable optionsRequiredExtra info
modelValueBooleanRequiredControls whether or not the dropdown is open
titleStringRequired
showBorderBooleanfalse
loadingBooleanfalseFor spinner: leave progress = null. For progress bar: set loading = true and provide a progress value between 0-1
progressNumbernullRange between 0-1. Values not in this range will be caped
progressWidthString"min(calc(100% - 2 * var(--hy-element-padding)), 200px)"Specify a width (valid css)
disabledBooleanfalse
sizeString"lg"lg, md, smSize Option Docs
variantString"secondary"secondary, ghost, ...See available variants
maxHeightStringnullSpecify a height (valid css) or null to leave it unconstrained
zIndexNumber10Z-Index of the expanding menu
hideOnClickOutsideBooleantrueIf the user clicks outside, the menu will hide
dropdownDirectionString"bottom"bottom, topThe direction the dropdown expands to
invalidBooleanfalseHighlights input with red color if true
invalidTextStringnullDisplays a message (if invalid = true)

Examples

<hy-dropdown v-model="dropdownIsOpenVariable" title="Click to expand">
    <p>Hello World</p>
</hy-dropdown>

Or with an icon (syntax equal to hy-select or hy-input)

<hy-dropdown v-model="dropdownIsOpenVariable" title="Click to expand">
    <template #content>
        <p>Hello World</p>
    </template>

    <template #icon>
        <i class="icon-settings"></i>
    </template>
</hy-dropdown>

HyDropzone Component

A dropzone component. Drop a file or click on it to open a native file selector window.

Targeting class

hy-dropzone

Options

NameTypeDefaultAvailable optionsRequiredExtra info
placeholderString"Drop file here or click to select a file"
readModeString"text"text, binaryString, dataURL, arrayBufferHow the file will be read. More info about what they do
acceptString"*"Which files to accept. About this attribute and how its syntax works

Reading the selected file

Once the user selects a file, the newValue event will be fired with an event object containing the following information:

{
    content: String,
    name: String,
    size: Number,
    lastModified: Number,
    type: String // MIME-Type of the selected file
}

Clearing the selected file

If one wants to clear the selected file, please call the clear method on the component instance. If this method is called, the newValue event will fire with $event = null.
Guide on how to do this using Vue refs:

<hy-dropzone readMode="dataURL" accept="image/*" @newValue="my_method_for_handling_the_event($event)" ref="myDropzone" />

<hy-button @click="$refs.myDropzone.clear()"> Clear </hy-button>

Directly accessing the underlying <input> element

The underlying <input type="file"> html element is the second child node of the dropzone component. Thus is can be direcly referenced:

<hy-dropzone ref="myDropzone" />
let inputElement = this.$refs.myDropzone.$el.childNodes[1];

Example

Hint: In Vue, the $event is the variable that contains the event object of the triggered event.

<hy-dropzone readMode="text" accept="text/*,application/*,.md" @newValue="myVariable = $event" />

Or:

<hy-dropzone readMode="dataURL" accept="image/*" @newValue="my_method_for_handling_the_event" />

Or:

<hy-dropzone readMode="dataURL" accept="image/*" @newValue="my_method_for_handling_the_event($event)" />

HyFilterButton Component

This component brings a filter "pill-shaped" HyButton with an "is active" indicator and a HySmartMenu. The button opens and closes the menu, no need for v-model.

Targeting class

hy-filter-button

Slot

NameIs also the default slotRequiredExtra info
buttonNoRequiredSlot for button content
contentNoRequiredSmartMenu/Popover: content slot. Receives the menuType variable
headerNoSmartMenu/Popover: header slot. Receives the menuType variable
footerNoSmartMenu/Popover: footer slot. Receives the menuType variable

Options

NameTypeDefaultAvailable optionsRequiredExtra info
activeBooleanfalseShows that the filter is active by adding a Floating Badge to the button
modeString"popover"popover, smartMenuType of menu to use
variantButtonStringnullprimary, secondary, ghost ...variant option of HyButton. If not overwritten, will use the selected default
variantPopoverString"match"match, contrastvariant option of HyPopover and HySmartMenu

The component inherits all options of HyButton, except for: variant
The component inherits all options of HySmartMenu, except for: variant, modelValue, reference

Example

<hy-filter-button headline="Filter example" minWidth="300px" :active="search != ''">
    <template #button>
        <i class="icon-search"></i>
        Search
    </template>

    <template #content>
        <hy-input v-model="search"></hy-input>
    </template>
</hy-filter-button>

Tip: wrap multiple filter buttons inside a HyFlexContainer with :allowBreak="false" justify="flex-start" set to create a filter row.

HyFlexContainer Component

This is basically a div with display: flex applied to it. If the screen is smaller than 800px, the flex-direction will be set to column

Targeting class

hy-flex-container

Slot

Pass the elements you want to position within the FlexContainer via the slot.

Options

NameTypeDefaultAvailable optionsRequiredExtra info
wrapBooleantruesee css flex-wrap property
justifyString"space-between"see css justify-content property
verticalAlignString"center"see css align-items property
directionString"row"see css flex-direction property
allowBreakBooleantrueWether the flex-container should switch to flex-direction: column if the screen is smaller than 800px

Your items will shrink to the minimum width without shrinking your content (e.g. text). If you would like to change this behaviour, please do this manually in your css.

Example

<hy-flex-container>
    <input />
    <button>Hello</button>
    <hy-checkbox />
</hy-flex-container>

Floating Badge

This is not a component but rather a utility class.

To activate, apply to any element the class hy-floating-badge.
Now you may specify the text to display via an data-badge-text attribute. You may use v-bind:data-badge-text to bind the attribute to a reactive vue variable (see example 2). This attribute can be ommited (or fed an empty string) to just show a small dot above the target element (see example 3).

Examples

Example 1:

<hy-button class="hy-floating-badge" data-badge-text="10k">Show the News</hy-button>

Example 2:

<hy-button class="hy-floating-badge" v-bind:data-badge-text="myBadgeText">Show the News</hy-button>

<hy-input v-model="myBadgeText" placeholder="Badge text"></hy-input>

Example 3:

<hy-button class="hy-floating-badge">Show the News</hy-button>

HyHeader Component

A page header component. Sticks to the top of the screen on mobile and floats on desktop devices.

Attention

The following steps need be performed if using this component:

  • We recommend using the same values for the properties maxHeight and resizeTo as used on HyMain
  • We recommend using the same value for the property switchToMobileAt as used on HyNavigationContainer
  • Always place the header ABOVE the HyMain component
  • Put this in your HTML head:

    <meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)" />
    
    <meta name="theme-color" content="hsl(220, 5%, 13%)" media="(prefers-color-scheme: dark)" />

If you need any guidance on how to structure your code, take a look at this guide: Recommended navigation code structure

Targeting class

hy-header

Slot

NameIs also the default slotRequiredExtra info
leftYesPosition: left, next to headline
rightNoPosition: far right

Options

NameTypeDefaultAvailable optionsRequired Extra info
headlineStringnull
iconStringnullName of an icon to display left of headline. Uses an <i class="..." />
doCoverShadowBooleantrueAdds a shadow underneath. Lets elements scrolling underneath fade into the void
floatingBooleantrueDo floating look on desktop devices
doExtendHeadlineBooleantrueControls .hy-extend-full class on headline element
maxWidthString"1400px"Must be same value as corresponding property on HyMain
resizeToNumber95Must be same value as corresponding property on HyMain
switchToMobileAtNumber850Must be same value as corresponding property on HyNavigationContainer
zIndexNumber50

Example

<hy-header maxWidth="800px" :resizeTo="90" headline="HyperUI" icon="icon-home">
    <!-- Any additional elements go here -->
</hy-header>

More complex example with two slots

<hy-header maxWidth="800px" :resizeTo="90" headline="HyperUI" icon="icon-home">
    <!-- Left slot must be named explicitly -->
    <template #left>
        <hy-button variant="ghost-bg" size="sm"> <i class="icon-chevron-left"></i> Back </hy-button>
    </template>

    <!-- Right slot can be treated as the default slot, but can named explicitly -->
    <hy-button variant="primary" size="sm"> Hello </hy-button>
</hy-header>

HyInput Component

Basic <input> element. It can be disabled and put into an loading state.
Use v-model to create a two-way binding.

Targeting class

hy-input

v-model

Syncs the current input value with your parent vue instance. View the Info about v-model section for more details.

Slot

NameIs also the default slotRequiredExtra info
leftYesPosition: left
rightNoPosition: far right

Options

NameTypeDefaultAvailable optionsRequiredExtra info
modelValueanyRequiredTwo-way binding for the input's value
typeString"text"Equal to HTML's type attribute. E.g. type="password"
variantString"secondary"secondary, ghost, ...See available variants
sizeString"lg"lg, md, smSize Option Docs
placeholderString""
loadingBooleanfalseFor spinner: leave progress = null. For progress bar: set loading = true and provide a progress value between 0-1
disabledBooleanfalse
extendBooleantrueControls wether the element extends to 100% or stays at max-content. Not recommended, use .hy-extend-full instead.
requiredBooleanfalseEqual to HTML's required attribute.
progressNumbernullRange between 0-1. Values not in this range will be caped
progressWidthString"min(calc(100% - 2 * var(--hy-element-padding)), 200px)"Specify a width (valid css)
invalidBooleanfalseHighlights input with red color if true
invalidTextStringnullDisplays a message (if invalid = true)
doAutofocusBooleanfalseWill focus input on mounted and blur before being unmounted

NOTE: Inheriting Props

All HTML attributes except id, class and vue props listed above, will be inherited to the underlying <input> element.

Example

<hy-input v-model="username" :disabled="false" :loading="isLoading" type="text" placeholder="Your username"></hy-input>

With an Icon on the left side

<hy-input v-model="username" :disabled="false" :loading="isLoading" type="text" placeholder="Your username">
    <i class="icon-search"></i>
</hy-input>

With an Icon on the right side

<hy-input v-model="username" :disabled="false" :loading="isLoading" type="text" placeholder="Your username">
    <template #right>
        <i class="icon-megaphone"></i>
    </template>
</hy-input>

With an Icon on the left and on the right side

<hy-input v-model="username" :disabled="false" :loading="isLoading" type="text" placeholder="Your username">
    <template #left>
        <i class="icon-search"></i>
    </template>
    <template #right>
        <i class="icon-megaphone"></i>
    </template>
</hy-input>

With progress bar

<hy-input
    v-model="username"
    :disabled="false"
    :loading="isLoading"
    :progress="loadingProgress"
    type="text"
    placeholder="Your username"
></hy-input>

HyListIcon Component

An iOS style list icon. Best used within sections with automatic dividers turned on to create an elegant e.g. settings page.

Targeting class

hy-list-icon

Slot

Pass your icon into the default slot.

Options

NameTypeDefaultAvailable optionsRequiredExtra info
colorString"transparent"blue, red, ...Background color. Use colors of your brand theme.
iconStringundefinedIf you have an icon font, use this prop instead of the icon slot. It's value will be applied to the class attribute of an <i> element.

Example

<hy-list-icon color="light-blue">
    <i class="icon-printer"></i>
    <!-- Your icon -->
</hy-list-icon>

Best used in sections:

<hy-section :showDividers="true">
    <hy-flex-container :allowBreak="false">
        <hy-list-icon color="pink"> <i class="icon-printer"></i> </hy-list-icon>

        <hy-toggle type="right"> Toggle this </hy-toggle>
    </hy-flex-container>

    <hy-flex-container :allowBreak="false">
        <hy-list-icon color="orange"> <i class="icon-plus-circle"></i> </hy-list-icon>

        <p>Look at this</p>
    </hy-flex-container>
</hy-section>

HyListItem Component

This list item was designed to build elegant settings pages. Best used within sections with automatic dividers turned on.

Targeting class

hy-list-item

Slot

NameIs also the default slotRequiredExtra info
contentYesRequiredContent of the list item
iconNoA SVG icon

Options

NameTypeDefaultAvailable optionsRequired  Extra info
colorString"transparent"blue, red, ...See HyListIcon options
iconStringundefinedSee HyListIcon options
clickableBooleanfalseAdds a chevron on the right and sets cursor: pointer
loadingBooleanfalseFor spinner: leave progress = null. For progress bar: set loading = true and provide a progress value between 0-1
progressNumbernullRange between 0-1. Values not in this range will be caped
progressWidthString"min(50%, 70px)Specify a width (valid css)
disabledBooleanfalse

Example

<hy-section :showDividers="true">
    <hy-list-item color="pink" icon="icon-printer">
        <p>Hello World</p>
    </hy-list-item>

    <hy-list-item color="red" :clickable="true">
        <p>Hello World</p>
    </hy-list-item>

    <hy-list-item color="red">
        <template #content>
            <p>Hello World</p>
        </template>

        <template #icon> <svg>...</svg> or <i class="icon-..."></i> </template>
    </hy-list-item>
</hy-section>

HyLoader Component

HyLoader

This is a custom loading indicator.
Use v-if="booleanVariable" to show the indicator or not.
This is just a spinning wheel, you must position the indicator by yourself.

Targeting class

hy-loader

Options

NameTypeDefaultAvailable optionsRequiredExtra info
widthNumber50In css px
heightNumber50In css px
lineNumber4In css px. This is how thick the line is rendered

Example

<hy-loader v-if="isLoading" :width="25" :height="25" :line="3" />

HyMain Component

A container that resizes based on your screen size. At a certain screen size it locks to a width of 1400px (or whatever you specify it to).

Targeting class

hy-main

Slot

Pass the elements you want to position within the Main view via the slot.

Options

NameTypeDefaultAvailable optionsRequiredExtra info
maxWidthString"1400px"Desired css max-width value
resizeToNumber95Will be a max-width in percent that the container will resize to if it must be smaller than the given maxWidth

Example

<hy-main maxWidth="800px" :resizeTo="90">
    <hy-flex-container>
        <input />
        <button>Hello</button>
        <hy-checkbox />
    </hy-flex-container>
</hy-main>

HyModal Component

A modal element. Adapts to mobile and desktop devices. Respects the bottom safe-area.

Targeting class

hy-modal

v-model

Syncs the current visibility state with your parent vue instance. View the Info about v-model section for more details. If modelValue is set to true, the modal will show. So you can open the modal programmatically while letting the user close the modal with the build in close button.

Slot

NameIs also the default slotRequiredExtra info
contentYesRequiredThe main content of the modal
headerNoPlace elements next to the close button. Use size="md" to match the close button
footerNoPlace elements in the sticky footer

Options

NameTypeDefaultAvailable optionsRequired  Extra info
modelValueBooleanRequiredTwo-way binding about whether the modal is open or not
headlineStringnull
descriptionStringnull
zIndexNumber200Z-Index of modal element
backgroundStringnullBackground of modal. Defaults to white / black depending on the color scheme
showScrollbarsBooleanfalse
doBSLBooleantrueWhether body scrolling should be disabled or not. If doBSL = true, then the user will only be able to scroll within the modal, not the entire body.
dismissibleBooleantrueIf set to false, the user cannot dismiss the modal. This option hides the close button and disabling the 'click-outside-way' of closing the modal.
swipeToCloseEnabledBooleantrueIf set to false, swipe to close on touch devices will be disabled and the close button will be shown on every device.
forceFullHeightOnMobileBooleanfalseForces full height if the modal is displayed on mobile devices. If false, the modal will only be as high as necessary
doBlurBgBooleanfalseBe advised: we noticed the modal getting stuck on iOS when setting this option to true.

Example

In your vue template:

<hy-modal v-model="modal.isOpen" headline="My test modal">
    <p>{{ myText }}</p>

    <hy-button v-on:click="modal.isOpen = false"> Close modal </hy-button>
</hy-modal>

Or with a header and footer:

<hy-modal v-model="modal.isOpen" headline="My test modal">
    <template #header>
        <hy-button variant="ghost-bg-red" size="md">Hello World Header</hy-button>
    </template>

    <template #content>
        <p>Lorem Ipsum</p>
    </template>

    <template #footer>
        <hy-button variant="ghost-bg-red" size="md">Hello World Footer</hy-button>
    </template>
</hy-modal>

HyNavigationContainer Component

HyperUI comes with a basic navigation system consisting of a sidebar and a tabbar UI component.

If you just provide a Sidebar and Tabbar component, then the container will display the sidebar on desktop devices and the tabbar on mobile devices. It uses the switchToMobileAt prop to decide which to use when.

Optionally, you may use the sidebarVisibleDesktop v-model (which defaults to true) to hide/show the sidebar on desktop devices.

If you use the sidebarVisibleMobile v-model (which defaults to false), you can also hide/show the sidebar on mobile devices. The sidebar will then render over the main content and clicking outside of it will close it. Using this does not void your option to use the tabbar component on mobile. You could, if you wish so, use the tabbar and the sidebar in conjunction on mobile.

Targeting class

hy-navigation-container

Slot

NameIs also the default slotRequiredExtra info
tabbarNoTabbar is for mobile phones
sidebarNoDisplayed on larger screens or if sidebarVisibleMobile is set to true
contentNoRequiredHere, you may place something like the <router-view />

Options

NameTypeDefaultAvailable optionsRequiredExtra info
sidebarVisibleDesktopBooleantrueToggles whether the sidebar is visible or retracted on desktop
sidebarVisibleMobileBooleantrueToggles whether the sidebar is visible or retracted on mobile devices
switchToMobileAtNumber850In CSS px. If the screen is smaller than this number, then this component will hide the sidebar and show the tabbar.
gapString"0px"Gap between sidebar and content when in desktop mode
doBSLBooleantrueIf enabled, body scrolling will be locked when opening the sidebar on mobile
sidebarPositionString"left"left, right
sidebarDimensionsObjectnullThis is just a backup for if the automatic sidebar-width-detection does not work, provide a {width: 'any css value'} value.

Example

<hy-navigation-container v-model:sidebarVisibleDesktop="sidebarVisibleDesktop" v-model:sidebarVisibleMobile="sidebarVisibleMobile">
    <template #sidebar>
        <hy-navigation-sidebar>
            <!-- Of course, one can put in this slot whatever they want: -->
            <h3>Hello World</h3>

            <!-- It's recommended to use the pre-styled navigation buttons for presenting the different routing destinations -->
            <button @click="$router.push('/home')" class="hy-navigation-option" :class="{ selected: $route.name == 'Home' }">
                <i class="icon-home"></i>
                <!-- Icon -->
                <span>Home</span>
                <!-- Label -->
            </button>

            <br />

            <button @click="$router.push('/settings')" class="hy-navigation-option" :class="{ selected: $route.name == 'Settings' }">
                <i class="icon-settings"></i>
                <span>Settings</span>
            </button>
        </hy-navigation-sidebar>
    </template>

    <template #tabbar>
        <hy-navigation-tabbar>
            <!-- These pre-style
4.0.4

5 months ago

4.0.1

5 months ago

4.0.0

6 months ago

4.0.3

5 months ago

4.0.2

5 months ago

3.2.8

11 months ago

3.2.7

11 months ago

4.0.0-beta.8

9 months ago

4.0.0-beta.7

9 months ago

4.0.0-beta.6

9 months ago

4.0.0-beta.5

9 months ago

4.0.0-beta.4

9 months ago

4.0.0-beta.3

9 months ago

4.0.0-beta.2

9 months ago

4.0.0-beta.1

9 months ago

4.0.0-beta.9

8 months ago

4.0.0-beta.33

7 months ago

4.0.0-beta.32

7 months ago

4.0.0-beta.34

7 months ago

4.0.0-beta.31

7 months ago

4.0.0-beta.30

7 months ago

4.0.0-beta.26

8 months ago

4.0.0-beta.25

8 months ago

4.0.0-beta.28

7 months ago

4.0.0-beta.27

7 months ago

4.0.0-beta.22

8 months ago

4.0.0-beta.21

8 months ago

4.0.0-beta.24

8 months ago

4.0.0-beta.23

8 months ago

4.0.0-beta.20

8 months ago

3.3.0-rc.1

9 months ago

4.0.0-beta.29

7 months ago

4.0.0-beta.15

8 months ago

4.0.0-beta.14

8 months ago

4.0.0-beta.17

8 months ago

4.0.0-beta.16

8 months ago

4.0.0-beta.11

8 months ago

4.0.0-beta.10

8 months ago

4.0.0-beta.13

8 months ago

4.0.0-beta.12

8 months ago

4.0.0-rc.1

7 months ago

4.0.0-rc.3

7 months ago

4.0.0-rc.2

7 months ago

4.0.0-rc.5

6 months ago

4.0.0-rc.4

6 months ago

4.0.0-rc.6

6 months ago

4.0.0-beta.19

8 months ago

4.0.0-beta.18

8 months ago

3.3.0-beta.11

11 months ago

3.3.0-beta.14

11 months ago

3.3.0-beta.15

11 months ago

3.3.0-beta.12

11 months ago

3.3.0-beta.13

11 months ago

3.3.0-beta.16

9 months ago

3.3.0-beta.17

9 months ago

3.3.1

8 months ago

3.3.0

9 months ago

3.2.6

12 months ago

3.3.0-beta.10

12 months ago

3.3.0-beta.8

12 months ago

3.3.0-beta.7

12 months ago

3.3.0-beta.9

12 months ago

3.3.0-beta.6

12 months ago

3.3.0-beta.2

1 year ago

3.3.0-beta.4

12 months ago

3.3.0-beta.5

12 months ago

3.2.2

1 year ago

3.2.5

12 months ago

3.2.3

12 months ago

3.3.0-beta.1

1 year ago

3.2.1-rc.2

1 year ago

3.2.1-rc.3

1 year ago

3.2.1-rc.4

1 year ago

3.2.1-rc.5

1 year ago

3.2.1-rc.1

1 year ago

3.2.1

1 year ago

3.2.0

1 year ago

3.2.0-beta.16

1 year ago

3.2.0-beta.15

1 year ago

3.2.0-beta.14

1 year ago

3.2.0-beta.13

1 year ago

3.2.0-beta.12

1 year ago

3.2.0-beta.11

1 year ago

3.2.0-beta.19

1 year ago

3.2.0-beta.18

1 year ago

3.2.0-beta.17

1 year ago

3.1.1

1 year ago

3.2.0-alpha.4

1 year ago

3.2.0-alpha.1

1 year ago

3.2.0-alpha.2

1 year ago

3.2.0-alpha.3

1 year ago

3.2.0-beta.8

1 year ago

3.2.0-beta.9

1 year ago

3.2.0-beta.6

1 year ago

3.2.0-beta.7

1 year ago

3.2.0-beta.4

1 year ago

3.2.0-beta.5

1 year ago

3.2.0-beta.2

1 year ago

3.2.0-beta.3

1 year ago

3.2.0-beta.1

1 year ago

3.2.0-beta.10

1 year ago

3.0.0

2 years ago

3.0.0-rc.4

2 years ago

3.0.0-rc.2

2 years ago

3.0.0-rc.1

2 years ago

3.0.0-rc.3

2 years ago

3.0.0-beta.17

2 years ago

3.0.0-beta.16

2 years ago

3.0.0-beta.14

2 years ago

3.0.0-beta.15

2 years ago

3.0.0-beta.12

2 years ago

3.0.0-beta.13

2 years ago

3.0.0-beta.9

2 years ago

3.0.0-beta.8

2 years ago

3.0.0-beta.10

2 years ago

3.0.0-beta.11

2 years ago

3.0.0-beta.7

2 years ago

3.0.0-beta.6

2 years ago

2.6.1

2 years ago

2.6.0

2 years ago

2.6.2

2 years ago

3.0.0-beta.1

2 years ago

3.0.0-beta.3

2 years ago

3.0.0-beta.2

2 years ago

3.0.0-beta.5

2 years ago

3.0.0-beta.4

2 years ago

2.5.2

2 years ago

2.6.0-beta.9

2 years ago

2.6.0-beta.8

2 years ago

2.6.0-beta.7

2 years ago

2.6.0-beta.5

2 years ago

2.6.0-beta.6

2 years ago

2.6.0-beta.4

2 years ago

2.6.0-beta.3

3 years ago

2.6.0-beta.2

3 years ago

2.5.0-beta.1

3 years ago

2.5.0-beta.2

3 years ago

2.5.0-beta.3

3 years ago

2.5.0

3 years ago

2.5.1

3 years ago

2.6.0-beta.1

3 years ago

2.4.0

3 years ago

2.4.0-rc.2

3 years ago

2.4.0-rc.1

3 years ago

2.4.0-beta.13

3 years ago

2.4.0-beta.12

3 years ago

2.4.0-beta.15

3 years ago

2.4.0-beta.14

3 years ago

2.4.0-beta.17

3 years ago

2.4.0-beta.16

3 years ago

2.4.0-beta.18

3 years ago

2.0.3

3 years ago

2.2.0

3 years ago

2.3.7

3 years ago

2.4.0-beta.11

3 years ago

2.4.0-beta.10

3 years ago

2.3.0

3 years ago

2.3.2

3 years ago

2.3.1

3 years ago

2.3.4

3 years ago

2.3.3

3 years ago

2.3.6

3 years ago

2.3.5

3 years ago

2.1.0

3 years ago

2.4.0-beta.8

3 years ago

2.4.0-beta.7

3 years ago

2.4.0-beta.9

3 years ago

2.4.0-beta.4

3 years ago

2.4.0-beta.3

3 years ago

2.4.0-beta.6

3 years ago

2.4.0-beta.5

3 years ago

2.4.0-beta.2

3 years ago

2.4.0-beta.1

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

2.0.0-beta.18

4 years ago

2.0.0-beta.9

4 years ago

2.0.0-beta.11

4 years ago

2.0.0-beta.10

4 years ago

2.0.0-beta.15

4 years ago

2.0.0-beta.14

4 years ago

2.0.0-beta.13

4 years ago

2.0.0-beta.12

4 years ago

2.0.0-beta.17

4 years ago

2.0.0-beta.16

4 years ago

2.0.0-beta.8

4 years ago

2.0.0-beta.7

4 years ago

2.0.0-beta.6

4 years ago

2.0.0-beta.2

4 years ago

2.0.0-beta.5

4 years ago

2.0.0-beta.4

4 years ago

2.0.0-beta.3

4 years ago

2.0.0-beta.1

4 years ago

1.4.2

4 years ago

1.4.1

4 years ago

1.3.2

4 years ago

1.4.0

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.0

4 years ago

1.1.0

4 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago