❤
npm
Sign UpSign In

@jaaahn/hyper-ui

4.0.4 • Public • Published

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

Auto Component OLD NEW Notes
[x] HyButton type --> variant
[x] HyDropdown border --> showBorder
[x] HyHeader extendHeadline --> doExtendHeadline
[ ] HyModal hideScrollbars --> showScrollbars !!! inverted behaviour
[ ] HyModal disableSwipeToClose --> swipeToCloseEnabled !!! inverted behaviour
[ ] HyModal disableDismiss --> dismissible !!! inverted behaviour
[ ] HySmartMenu hideScrollbars --> showScrollbars !!! inverted behaviour
[ ] HySmartMenu disableSwipeToClose --> swipeToCloseEnabled !!! inverted behaviour
[ ] HySmartMenu disableDismiss --> dismissible !!! inverted behaviour
[x] HySmartMenu type --> variant
[x] HyPopover hover --> doOpenOnHover
[x] HyPopover type --> variant
[x] HySection border --> showBorder
[x] HySection dividers --> showDividers
[x] HySelectDropdown enableSearch --> showSearch
[x] HySelectDropdown border --> showBorder
[x] HyTable border --> showBorder
[x] HyTabbar type --> variant !!! Renamed option "blue" to "primary"

Renamed element variants

Auto OLD NEW Notes
[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

Auto OLD NEW Notes
[x] normal --> lg Still 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:

OLD NEW
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:

OLD NEW
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  Type Default Available options Extra info
theme String "system" system, light, dark "system" will choose light- or darkmode depending on the users system preferences
size String "lg" Size option Only on supported elements
variant String component specific See element variants Only on supported elements
brandTheme Object Classic HyperUI color scheme View 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 name Result Notes
primary Primary action button style featuring the blue accent color Only available on HyButton
secondary Secondary action button, matches the background color
ghost Button with only text. Has hover and click effect. 
ghost-bg Button 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

Name Type Default Available options Required Extra info
variant String "secondary" primary, secondary, ghost, ... See available variants
size String "lg" lg, md, sm Size Option Docs
loading Boolean false For spinner: leave progress = null. For progress bar: set loading = true and provide a progress value between 0-1
progress Number null Range between 0-1. Values not in this range will be caped
progressWidth String "min(calc(100% - 2 * var(--hy-element-padding)), 200px)" Specify a width (in css syntax)
disabled Boolean false
extend Boolean true Controls 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

Name Type Default Available options Required Extra info
modelValue Boolean Required Two-way binding for the checkbox's value
disabled Boolean false
extend Boolean true Controls wether the element extends to 100% or stays at max-content. Not recommended, use .hy-extend-full instead.
type String "left" left, right Aligns 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

Name Is also the default slot Required Extra info
content Yes Required The content to display in the menu
title No If you don't want to use the title prop, you may use this slot. Note: additional styling of the element might be necessary.
icon No

Options

Name Type Default Available options Required Extra info
modelValue Boolean Required Controls whether or not the dropdown is open
title String Required
showBorder Boolean false
loading Boolean false For spinner: leave progress = null. For progress bar: set loading = true and provide a progress value between 0-1
progress Number null Range between 0-1. Values not in this range will be caped
progressWidth String "min(calc(100% - 2 * var(--hy-element-padding)), 200px)" Specify a width (valid css)
disabled Boolean false
size String "lg" lg, md, sm Size Option Docs
variant String "secondary" secondary, ghost, ... See available variants
maxHeight String null Specify a height (valid css) or null to leave it unconstrained
zIndex Number 10 Z-Index of the expanding menu
hideOnClickOutside Boolean true If the user clicks outside, the menu will hide
dropdownDirection String "bottom" bottom, top The direction the dropdown expands to
invalid Boolean false Highlights input with red color if true
invalidText String null Displays 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

Name Type Default Available options Required Extra info
placeholder String "Drop file here or click to select a file"
readMode String "text" text, binaryString, dataURL, arrayBuffer How the file will be read. More info about what they do
accept String "*" 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

Name Is also the default slot Required Extra info
button No Required Slot for button content
content No Required SmartMenu/Popover: content slot. Receives the menuType variable
header No SmartMenu/Popover: header slot. Receives the menuType variable
footer No SmartMenu/Popover: footer slot. Receives the menuType variable

Options

Name Type Default Available options Required Extra info
active Boolean false Shows that the filter is active by adding a Floating Badge to the button
mode String "popover" popover, smartMenu Type of menu to use
variantButton String null primary, secondary, ghost ... variant option of HyButton. If not overwritten, will use the selected default
variantPopover String "match" match, contrast variant 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

Name Type Default Available options Required Extra info
wrap Boolean true see css flex-wrap property
justify String "space-between" see css justify-content property
verticalAlign String "center" see css align-items property
direction String "row" see css flex-direction property
allowBreak Boolean true Wether 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

Name Is also the default slot Required Extra info
left Yes Position: left, next to headline
right No Position: far right

Options

Name Type Default Available options Required  Extra info
headline String null
icon String null Name of an icon to display left of headline. Uses an <i class="..." />
doCoverShadow Boolean true Adds a shadow underneath. Lets elements scrolling underneath fade into the void
floating Boolean true Do floating look on desktop devices
doExtendHeadline Boolean true Controls .hy-extend-full class on headline element
maxWidth String "1400px" Must be same value as corresponding property on HyMain
resizeTo Number 95 Must be same value as corresponding property on HyMain
switchToMobileAt Number 850 Must be same value as corresponding property on HyNavigationContainer
zIndex Number 50

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

Name Is also the default slot Required Extra info
left Yes Position: left
right No Position: far right

Options

Name Type Default Available options Required Extra info
modelValue any Required Two-way binding for the input's value
type String "text" Equal to HTML's type attribute. E.g. type="password"
variant String "secondary" secondary, ghost, ... See available variants
size String "lg" lg, md, sm Size Option Docs
placeholder String ""
loading Boolean false For spinner: leave progress = null. For progress bar: set loading = true and provide a progress value between 0-1
disabled Boolean false
extend Boolean true Controls wether the element extends to 100% or stays at max-content. Not recommended, use .hy-extend-full instead.
required Boolean false Equal to HTML's required attribute.
progress Number null Range between 0-1. Values not in this range will be caped
progressWidth String "min(calc(100% - 2 * var(--hy-element-padding)), 200px)" Specify a width (valid css)
invalid Boolean false Highlights input with red color if true
invalidText String null Displays a message (if invalid = true)
doAutofocus Boolean false Will 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

Name Type Default Available options Required Extra info
color String "transparent" blue, red, ... Background color. Use colors of your brand theme.
icon String undefined If 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

Name Is also the default slot Required Extra info
content Yes Required Content of the list item
icon No A SVG icon

Options

Name Type Default Available options Required   Extra info
color String "transparent" blue, red, ... See HyListIcon options
icon String undefined See HyListIcon options
clickable Boolean false Adds a chevron on the right and sets cursor: pointer
loading Boolean false For spinner: leave progress = null. For progress bar: set loading = true and provide a progress value between 0-1
progress Number null Range between 0-1. Values not in this range will be caped
progressWidth String "min(50%, 70px) Specify a width (valid css)
disabled Boolean false

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

Name Type Default Available options Required Extra info
width Number 50 In css px
height Number 50 In css px
line Number 4 In 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

Name Type Default Available options Required Extra info
maxWidth String "1400px" Desired css max-width value
resizeTo Number 95 Will 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

Name Is also the default slot Required Extra info
content Yes Required The main content of the modal
header No Place elements next to the close button. Use size="md" to match the close button
footer No Place elements in the sticky footer

Options

Name Type Default Available options Required   Extra info
modelValue Boolean Required Two-way binding about whether the modal is open or not
headline String null
description String null
zIndex Number 200 Z-Index of modal element
background String null Background of modal. Defaults to white / black depending on the color scheme
showScrollbars Boolean false
doBSL Boolean true Whether 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.
dismissible Boolean true If 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.
swipeToCloseEnabled Boolean true If set to false, swipe to close on touch devices will be disabled and the close button will be shown on every device.
forceFullHeightOnMobile Boolean false Forces full height if the modal is displayed on mobile devices. If false, the modal will only be as high as necessary
doBlurBg Boolean false Be 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

Name Is also the default slot Required Extra info
tabbar No Tabbar is for mobile phones
sidebar No Displayed on larger screens or if sidebarVisibleMobile is set to true
content No Required Here, you may place something like the <router-view />

Options

Name Type Default Available options Required Extra info
sidebarVisibleDesktop Boolean true Toggles whether the sidebar is visible or retracted on desktop
sidebarVisibleMobile Boolean true Toggles whether the sidebar is visible or retracted on mobile devices
switchToMobileAt Number 850 In CSS px. If the screen is smaller than this number, then this component will hide the sidebar and show the tabbar.
gap String "0px" Gap between sidebar and content when in desktop mode
doBSL Boolean true If enabled, body scrolling will be locked when opening the sidebar on mobile
sidebarPosition String "left" left, right
sidebarDimensions Object null This 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-styled navigation buttons are also in the tabbar available, but they change their style to better fit in the tabbar -->
            <button @click="$router.push('/home')" class="hy-navigation-option" :class="{ selected: $route.name == 'Home' }">
                <i class="icon-home"></i>
                <span>Home</span>
            </button>

            <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-tabbar>
    </template>

    <template #content>
        <!-- This example uses Vue Router, but essentially you can put anything in here -->
        <router-view></router-view>
    </template>
</hy-navigation-container>

The <hy-navigation-sidebar> and <hy-navigation-tabbar> components are explained below.

HyNavigationSidebar Component

As part of the navigation system HyperUI offers, there is a Sidebar UI component. It should be placed within a HyNavigationContainer.

Targeting class

hy-navigation-sidebar

Slot

Place any content (e.g. a logo, company name and the available pages) that should be displayed within the sidebar here.

Within this slot, one may use the "hy-navigation-option" class on a <button> element to create a specially designed button that may represent a page that the user can visit. Apply the "selected" class to it and it will be highlighted. Within, you can place a label next to an icon.

The following example will use vue router to create a navigation option, that represents the 'home' page of your app:

<button @click="$router.push('/home')" class="hy-navigation-option" :class="{ selected: $route.name == 'Home' }">
    <!-- Icon -->
    <i class="icon-home"></i>

    <!-- Label -->
    <span>Home</span>
</button>

Note: this syntax is identical to the syntax used in <hy-navigation-tabbar> component. Note: if you want, you can wrap the icon in a HyListIcon component to give your sidebar some color.

Options

Name Type Default Available options Required Extra info
width String "300px"
height String "100dvh" Use the dvh unit for a better experience on mobile devices
topInset String "0px" Controls the top property of the sticky sidebar visual element
leftInset String "0px" Controls the left property of the sticky sidebar visual element

Example

For example look at the HyNavigationContainer's example section

HyNavigationTabbar Component

As part of the navigation system HyperUI offers, there is a Tabbar UI component. It should be placed within a HyNavigationContainer.
This component looks similar to the tabbar that iOS apps typically have.

Targeting class

hy-navigation-tabbar

Slot

Place the available navigation options that should be displayed within the tabbar here.

Within this slot, one may use the "hy-navigation-option" class on a <button> element to create a specially designed button that may represent a page that the user can visit. Apply the "selected" class to it and it will be highlighted. Within, you can place a label below an icon.

The following example will use vue router to create a navigation option, that represents the 'home' page of your app:

<button @click="$router.push('/home')" class="hy-navigation-option" :class="{ selected: $route.name == 'Home' }">
    <!-- Icon -->
    <i class="icon-home"></i>

    <!-- Label -->
    <span>Home</span>
</button>

Note: this syntax is identical to the syntax used in <hy-navigation-sidebar> component.

Options

Name Type Default Available options Required Extra info
zIndex Number 100

Example

For example look at the HyNavigationContainer's example section

HyNotes Component

Notes are a form of section to display notes, warnings, errors or loading states.

Targeting class

hy-notes

Slot

Pass any content you want to display inside the notes section. Inline text is automatically centered. Use the hy-text-center utility class to center the text on paragraphs.

Options

Name Type Default Available options Required Extra info
variant String "note" note, blue, red, ... Use note for gray background or any other brand theme color
loading Boolean false For spinner: leave progress = null. For progress bar: set loading = true and provide a progress value between 0-1
progress Number null Range between 0-1. Values not in this range will be caped
progressWidth String "calc(100% - 2 * var(--hy-element-padding))" Specify a width (valid css)
borderRadiusVariant String "section" section, element Control whether the border radius matches a section or an element

Example

<hy-notes variant="note"> These are notes </hy-notes>

<hy-notes variant="error" borderRadiusVariant="element"> These are notes </hy-notes>

HyPopover Component

A popover. Floats above the main content and stays attached to the reference element. Will disappear if the user clicks outside of it.

Targeting class

hy-popover

v-model

Syncs the current open state with your parent vue instance. View the Info about v-model section for more details. If modelValue is set to true, the popover will show. So you can open the popover programmatically while giving the user the option to close the popover by clicking outside of it.

Slot

Name Is also the default slot Required Extra info
content Yes Required The content of the popover
header No Place elements in the header
footer No Place elements in a sticky footer

Options

Name Type Default Available options  Required Extra info
modelValue Boolean Required Controls whether the popover is shown or not
reference HTMLElement or String null Required String must be a valid query selector string. Target element to which the popover should attach to.
doOpenOnHover Boolean false If true, the popover will show if the user hovers over the target element
hoverDelay Number 500 In milliseconds. Delay to wait before popover will show (only for hover). Aborts if user stops hovering over target element
variant String "match" match, contrast Color variant of popover compared to the overall color scheme
zIndex Number 10 Z-Index of popover element
hideOnClickOutside Boolean true If the user clicks outside, the popover will hide
minWidth String "0" Desired css min-width value, e.g. "400px"
maxWidth String unset Desired css max-width value, e.g. "600px"
maxHeight String unset Desired css max-height value, e.g. "100px"
placement String "bottom" Available options
offsetMainAxis Number 15 Offset on main axis
offsetCrossAxis Number 0 Offset on cross axis
headline String null
description String null
doConstrainHeight Boolean false BETA. If enabled, will try to constrain the height to the viewport size

Example

Using a query selector string:

<hy-popover v-model="myPopoverIsOpen" reference="#popoverTarget" headline="Headline" description="Description">
    <p>Popover</p>
</hy-popover>

<hy-button id="popoverTarget" @click="myPopoverIsOpen = true"> Attach popover here </hy-button>

OR: Passing a HTMLElement as reference:

<hy-popover v-model="myPopover.isOpen" :reference="myPopover.targetElement">
    <p>Popover</p>
</hy-popover>

<!-- Just some example elements the popover can attach to -->
<!-- We use pointer-events: none on the icons to prevent the popover from attaching to the icon instead of the button -->
<hy-flex-container>
    <hy-button @click="openMyPopover($event.target)"> <i class="icon-printer" style="pointer-events: none"></i> </hy-button>
    <hy-button @click="openMyPopover($event.target)"> <i class="icon-image" style="pointer-events: none"></i> </hy-button>
    <hy-button @click="openMyPopover($event.target)"> <i class="icon-megaphone" style="pointer-events: none"></i> </hy-button>
    <hy-button @click="openMyPopover($event.target)"> <i class="icon-calendar" style="pointer-events: none"></i> </hy-button>
    <hy-button @click="openMyPopover($event.target)"> <i class="icon-home" style="pointer-events: none"></i> </hy-button>
    <hy-button @click="openMyPopover($event.target)"> <i class="icon-lock-open" style="pointer-events: none"></i> </hy-button>
</hy-flex-container>
methods: {
    openMyPopover(targetElement) {
        this.myPopover.targetElement = targetElement;
        this.myPopover.isOpen = true;
    },
}

HyProgressBar Component

This is a custom progress bar.

Targeting class

hy-progress-bar

Options

Name  Type Default Available options  Required Extra info
progress Number - Required Range between 0-1. Values not in this range will be caped
width String "100%" Specify a width (in css syntax)

Example

<hy-progress-bar v-if="isLoading" :progress="loadingProgress" width="50%" />

HyRadioButton Component

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

Targeting class

hy-radio-button

v-model

Syncs which radio button is selected with your parent vue instance. View the Info about v-model section for more details. This allows you to programmatically set the value while still allowing the user to select the option he wants.

Slot

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

Options

Name Type Default Available options Required Extra info
modelValue String Required Two-way binding about wether the radio is selected or not.
value String Required Value of your radio button. If the radio button is clicked, this will be written to your modelValue variable. Works similar to html's <option value="...">-tag one uses within selects.
name String Set the name attribute of the <input type="radio">-tag used within the component.
disabled Boolean false
type String "left" left, right Aligns either label and box left, or label on the left and box on the right.
extend Boolean true Controls wether the element extends to 100% or stays at max-content. Not recommended, use .hy-extend-full instead.

Example

<!-- These three components will form a radio group, where only one option can be selected at a time. -->
<hy-radio-button v-model="someVariable" value="option1" :disabled="disabledVariable"> Option 1 </hy-radio-button>
<hy-radio-button v-model="someVariable" value="option2" :disabled="disabledVariable"> Option 2 </hy-radio-button>
<hy-radio-button v-model="someVariable" value="option3" :disabled="disabledVariable" type="right"> Option 3 </hy-radio-button>

HySection Component

This is a section, with (unlike the body) a white background. It should be used most of the time when working with content. A section includes a title and two description fields.

Targeting class

hy-section

Slot

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

v-model: Make it collapsable

If provided alongside a value for title, the section becomes collapsable. Omit this, if you don't want the section to be collapsable (default behaviour).
View the Info about v-model section for more details.

Options

Any title, pre or post field left as null won't be rendered.

Name Type Default Available options Required Extra info
showBorder Boolean false
showDividers Boolean false A divider between each element will be added automatically if set to true
title String null
pre String null Description field over slot
post String null Description field under slot
modelValue Boolean null Collapse the section (only active, if a value for title is provided)

Example

<hy-section :showBorder="true" :showDividers="false">
    <hy-flex-container>
        <input />
        <hy-button>Hello</hy-button>
        <hy-checkbox />
    </hy-flex-container>
</hy-section>

<hy-section title="My Section" pre="Description" v-model="testSectionCollapsed">
    <hy-button>Hello</hy-button>
</hy-section>

HySelect Component

A HTML select element with custom styling and an icon. Use v-model to create a two-way binding.

Targeting class

hy-select

v-model

Syncs the selected option with your parent vue instance. View the Info about v-model section for more details. This allows you to programmatically set the value while still allowing the user to select the option he wants.

Slot

Name Is also the default slot Required Extra info
options Yes Required Pass the <option> elements as you would with regular HTML
icon No

Options

Name Type Default Available options Required Extra info
modelValue String Required Two-way binding about the selected option
loading Boolean false For spinner: leave progress = null. For progress bar: set loading = true and provide a progress value between 0-1
disabled Boolean false
extend Boolean true Controls wether the element extends to 100% or stays at max-content. Not recommended, use .hy-extend-full instead.
size String "lg" lg, md, sm Size Option Docs
variant String "secondary" secondary, ghost ... See available variants
progress Number null Range between 0-1. Values not in this range will be caped
progressWidth String "min(calc(100% - 2 * var(--hy-element-padding)), 200px)" Specify a width (valid css)
invalid Boolean false Highlights input with red color if true
invalidText String null Displays a message (if invalid = true)

Example

<hy-select v-model="variable" :disabled="false" :loading="isLoading">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</hy-select>

With an icon:

<hy-select v-model="variable" :disabled="false" :loading="isLoading">
    <template #options>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </template>

    <template #icon>
        <i class="icon-sort-descending"></i>
    </template>
</hy-select>

With progress bar

<hy-select v-model="variable" :disabled="false" :loading="isLoading" :progress="loadingProgress">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</hy-select>

HySelectDropdown Component

Similar to a hy-select but comes with its own menu UI and search functionality. Utilises hy-dropdown under the hood.

Targeting class

hy-select-dropdown

v-model

Syncs the selected option with your parent vue instance. View the Info about v-model section for more details. This allows you to programmatically set the value while still allowing the user to select the option he wants.

Slot

Name Is also the default slot Required Extra info
options Yes Required Specify icons as follows: <p data-value="internalValue"> Display Value </p>
icon No

Options

Name Type Default Available options   Required Extra info
modelValue String Required Two-way binding about the selected option
showSearch Boolean true Disable the search bar
searchPlaceholder String "Search..."
searchNoResults String "No search results found..."
invalid Boolean false Highlights input with red color if true
invalidText String null Displays a message (if invalid = true)

Additionally, this menu supports these properties from HyDropdown:

showBorder, loading, progress, progressWidth, disabled, size, variant, maxHeight, zIndex, hideOnClickOutside, dropdownDirection

Examples

<hy-select-dropdown v-model="variable">
    <p data-value="option1">Option 1</p>
    <p data-value="option2">Option 2</p>
    <p data-value="option3">Option 3</p>
    <p data-value="option4">Option 4</p>
</hy-select-dropdown>

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

<hy-select-dropdown v-model="variable">
    <template #options>
        <p data-value="option1">Option 1</p>
        <p data-value="option2">Option 2</p>
        <p data-value="option3">Option 3</p>
        <p data-value="option4">Option 4</p>
    </template>

    <template #icon>
        <i class="icon-sort-descending"></i>
    </template>
</hy-select-dropdown>

HySmartMenu Component

Sometimes a modal is just right for mobile devices but too big on desktops. A smart menu is a modal on mobile that turns into a compact popover on desktop. This components uses HyModal and HyPopover under the hood.

Targeting class

Cannot be directly targeted. Use the targeting classes for HyPopover and HyModal

v-model

Syncs the current open state with your parent vue instance. View the Info about v-model section for more details. If modelValue is set to true, the menu will show.

Slot

Name Is also the default slot Required Extra info
content Yes Required The content of the popover / modal. A menuType variable is exposed to this slot with the values: modal or popover. Read more about so called Scoped Slots
header No Place elements in the header (Modal: next to the close button => use size="md" to match the close button)
footer No Place elements in a sticky footer

Options

Name Type Default Available options  Required Extra info
modelValue Boolean Required Controls whether the menu is shown or not
reference HTMLElement or String Required Inherited from HyPopover
zIndexModal Number 200 Controls zIndex of modal
zIndexPopover Number 10 Controls zIndex of popover

Additionally, this component inherits these properties from HyModal (if mobile device):

background, showScrollbars, doBSL, swipeToCloseEnabled, dismissible, forceFullHeightOnMobile, doBlurBg, headline, description

Additionally, this component inherits these properties from HyPopover (if desktop device):

reference, hideOnClickOutside, minWidth, maxWidth, maxHeight, variant, placement, offsetMainAxis, offsetCrossAxis, headline, description

Example

<!-- Use properties from both HyPopover and HyModal -->
<hy-smart-menu
    v-model="mySmartMenuIsOpen"
    reference="#smartMenuTarget"
    maxWidth="400px"
    background="#000"
    headline="Headline"
    description="Description"
>
    <template #header>
        <hy-button size="md"> ... </hy-button>
    </template>

    <template #content>
        <p>A smart menu is a modal on mobile that turns into a compact popover on desktop.</p>

        <hy-button @click="mySmartMenuIsOpen = false" variant="primary">Close this smart menu</hy-button>
    </template>
</hy-smart-menu>

<hy-button @click="mySmartMenuIsOpen = !mySmartMenuIsOpen" id="smartMenuTarget"> Toggle smart menu </hy-button>

Access the menuType variable exposed to the content slot:

<!-- Notice the syntax for a named scoped slot. Refer to the vue docs for more info. -->
<template #content="{ menuType }">
    <p>{{ menuType }}</p>
</template>

Attention: Accessing menuType is different if using only the default ('content') slot:

<!-- Notice the syntax for this scoped slot as well as the position compared to a regular HySmartMenu. Refer to the vue docs for more info -->
<hy-smart-menu v-slot="{ menuType }">
    <p>{{ menuType }}</p>
</hy-smart-menu>

HySplitView Component

A component that can hold multiple sections which can be resized with a drag handle.
It's like a flex container with drag handles :)

Targeting class

hy-split-view

Slot

Just pass as many elements/sections you want. There is no maximum sections limit.

BUT, you must give each section an individual name. Which name you choose is up to you. Read more about named slots.

Options

Name  Type Default Available options  Required Extra info
minSizes Array null Specify minimum widths for each section. Use px or % values. Use null to allow the section to fully collapse.
maxSizes Array null Specify maximum widths for each section. Use px or % values. Use null to allow the section to fully expand and take all the available space.
initialSizes Array null Specify initial widths for each section. Use px or % values. Use null to let it the component distribute the remaining space for each section.
direction String "row" row, column If choosing column, please assign an explicit height to the component. Otherwise every section will just be as small as possible and the component will not be interactable.
handleType String "normal" normal, normal-transparent, slim
disabled Boolean false
doBSL Boolean true This component automatically locks body scrolling (BSL) while dragging

Example

<!-- Explicit height required, as direction="column" would otherwise be relatively useless -->
<hy-split-view
    :minSizes="['30px', null, '10%']"
    :maxSizes="['50%', null, null]"
    :initialSizes="['40%', null, null]"
    direction="row"
    handleType="slim"
    :disabled="disabledVariable"
    style="height: 400px"
>
    <!-- Min width: 30px -->
    <!-- Max width: 50% -->
    <!-- Initial width: 40% -->
    <template #slot1>
        <hy-section style="height: 100%">
            <p>Content of slot 1</p>
        </hy-section>
    </template>

    <!-- Min width: 0px -->
    <!-- Max width: 100% (in reality less, since the first slot has a min-width constraint) -->
    <!-- Initial width: 30% (automatically calculated) -->
    <template #slot2>
        <hy-section style="height: 100%">
            <p>Content of slot 2</p>
        </hy-section>
    </template>

    <!-- Min width: 10% -->
    <!-- Max width: 100% (in reality less, since the first slot has a min-width constraint) -->
    <!-- Initial width: 30% (automatically calculated) -->
    <template #slot3>
        <hy-section style="height: 100%">
            <p>Content of slot 3</p>
        </hy-section>
    </template>
</hy-split-view>

Note: what you put inside the templates is completely up to you. We just added the height: 100% to make all the sections fill the entire available space within one column.

HySubSection Component

Has a slightly darker background-color than a section. Intended for use with only one input / button (etc.) element but one can pass any element via the slot. A sub-section includes a title and two description fields.

Targeting class

hy-sub-section

Slot

Pass the element(s) you want to position within the Sub-Section via the slot.

v-model: Make it collapsable

If provided alongside a value for title, the sub-section becomes collapsable. Omit this, if you don't want the section to be collapsable (default behaviour).
View the Info about v-model section for more details.

Options

Any title, pre or post field left as null won't be rendered.

Name Type Default Available options  Required Extra info
title String null
pre String null Description field over slot
post String null Description field under slot
modelValue Boolean null Collapse the sub-section (only active, if a value for title is provided)

Example

<hy-sub-section title="Title" pre="First description" post="Second description">
    <hy-input v-model="testInput" placeholder="Input field" />
</hy-sub-section>

<hy-sub-section title="Title" v-model="testSubSectionCollapsed">
    <hy-input v-model="testInput" placeholder="Input field" />
</hy-sub-section>

Info about background color and padding

This component was designed to be used within a regular Section. That's why it has a slightly different color than normal sections. If you want them to appear with the same color as Sections, for example to use them without a wrapper section, then please add the following lines of css to your code:

.hy-sub-section {
    background-color: var(--hy-section-bg-color);

    /* If you want them to have the same padding as regular sections */
    padding: var(--hy-section-padding);
}

HyTabbar Component

A tabbar with multiple tabs the user can switch between. Sometimes this is known as a segmented picker or a switch. Use v-model to create a two-way binding, much like the <Select> works.
This component supports dynamically created options (e.g. if using a v-for loop for generating options).
If there are too many options to fit them, the component will automatically allow the user to scroll through the options. For this to work, the component may not be wrapped in a display: flex container or a hy-flex-container!

Targeting class

hy-tabbar

v-model

Syncs the selected tab with your parent vue instance. View the Info about v-model section for more details.

Slot

Pass all of the options in this syntax: <p data-value="valueOfTab"> Display Value </p>.

Options

Name Type Default Available options  Required Extra info
modelValue String Required Two-way binding about which tab is selected
disabled Boolean false
variant String "gray" gray, primary
size String "lg" lg, md, sm Size Option Docs

Example

<hy-tabbar v-model="variable" :disabled="disabledVariable">
    <p data-value="tab1">Tab 1</p>
    <p data-value="tab2">Tab 2</p>
    <p data-value="tab3">Tab 3</p>
</hy-tabbar>

HyTable Component

A styled table. Use instead of a normal html table.

Targeting class

hy-table

Slot

Pass HTML table elements.

Options

Name Type Default Available Options Required Extra info
showBorder Boolean true

Example

<hy-table :showBorder="false">
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
    </tr>
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
</hy-table>

HyTextArea Component

Basic <textarea> element with the option of being disabled.
Use v-model to create a two-way binding.
This Component was not build for being used within a FlexContainer.

Targeting class

hy-text-area

v-model

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

Options

Name Type Default Available options Required Extra info
modelValue String Required Two-way binding for the input's value
placeholder String  ""
variant String "secondary" secondary, ghost ... See available variants
disabled Boolean false
required Boolean false Similar to HTML's required attribute.
resize String "vertical" none, both, vertical, horizontal Similar to CSS resize rule
size String "lg" lg, md, sm Size Option Docs
invalid Boolean false Highlights input with red color if true
invalidText String null Displays a message (if invalid = true)

NOTE: Inheriting Props

All HTML props except id, class and vue props listed above, will be inherited to the underlying <textarea> element.
Vue will also automatically inherit all props, including id and class, to the <div> wrapper that this component uses.

Example

<hy-text-area v-model="essay" :disabled="false" placeholder="Your essay goes here" />

HyToggle Component

A "checkbox" in the form of a toggle. Sometimes this is also called a "switch".

This component is functionally identical to the <hy-checkbox> component. Please refer to its documentation.

Example

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

HyTooltip Component

This is a popover that opens and closes automatically if hovering over the reference element. No need for a v-model.

Targeting class

hy-tooltip

Slot

Name Is also the default slot Required Extra info
content Yes Required The content of the tooltip
header No Place elements in the header
footer No Place elements in a sticky footer

Options

This component inherits all options, but modelValue, doOpenOnHover and hideOnClickOutside from HyPopover.

Example

<p id="tooltipDemoReference">Hover to show tooltip</p>

<hy-tooltip reference="#tooltipDemoReference">
    <p>Hello World!</p>
</hy-tooltip>

Utility classes

hy-reset

The library puts certain styles on text elements like p or h1 tags. You can disable this by adding class="hy-reset" to that specific element.

hy-extend-full

Applies flex: 100 !important to an element. Useful in a <hy-flex-container> if all other elements should shrink to their minimal size.

See this example:

<hy-flex-container>
    <h3 class="hy-extend-full">My element</h3>

    <hy-button>Do action</hy-button>
</hy-flex-container>

On desktop, the button will shrink automatically to it's minimal size to give the h3 room.
On mobile, these elements will be arranged beneath each other automatically, both having the same size and without one element being weirdly shaped or having the wrong width.

hy-no-min-width

Sets min-width: 0 !important

hy-min-width

Sets min-width: min-content !important

hy-remove-leading-trailing-margins

Removes the top-margin from the first child and the bottom-margin from the last child.
Ever noticed the Section or Popover components doing exactly this?

hy-remove-leading-margins

Removes the top-margin from the first child.

hy-remove-trailing-margins

Removes the bottom-margin from the last child.

hy-no-margin

This removes margins (and paddings).

hy-label

Removes the distance between itself and the element beneath it. Also makes the space between itself and the previous element bigger. Can only be used on p-Tags.

hy-element-shadow

Just adds a shadow, like a button has.

hy-section-shadow

Build for increasing contrast if working with sections. (But it works on any component). If you want this to be default for every section, then add these lines of code to your css:

.hy-section {
    box-shadow: var(--hy-section-shadow);
}

hy-text-[COLOR]

Changes font color of the element and all its childs. Available default classes are:

  • hy-text-gray-1
  • hy-text-gray-2
  • hy-text-gray-3
  • hy-text-gray

All other text-color utility classes are derived from your selected brand theme.

hy-text-[ALIGNMENT]

Sets the text alignment

  • hy-text-left
  • hy-text-center
  • hy-text-right
  • hy-text-justify

hy-font-weight-bold

Applies a font weight of bold to the element and all its level childs.

hy-font-weight-normal

Applies a font weight of normal to the element and all its level childs.

hy-border-accent

Applies a border color of the accent color (border-color: var(--hy-accent-color)) to the element and all its top level childs.

hy-hide-scrollbars

Tries to hide scrollbars of that element.

hy-bg-[COLOR]

Instantly apply a background-color for an element from your html. Available default classes are:

  • hy-bg-gray-1
  • hy-bg-gray-2
  • hy-bg-gray-3

All other background-color utility classes are derived from your selected brand theme.

hy-floating-badge

View documentation here.

hy-hide-mobile

Hides an element if device is considered a mobile device.

hy-hide-desktop

Hides an element if device is considered a desktop device.

CSS variables

General Variables

--hy-font-size: 20px;
--hy-font-size-small: calc(var(--hy-font-size) * 0.75);
--hy-font-family: Helvetica, sans-serif;

--hy-flex-gap: 10px;
--hy-section-padding: 1rem;
--hy-section-border-radius: calc(2 * var(--hy-element-border-radius));
--hy-section-shadow: 0 0 32px 5px var(--hy-section-shadow-color);
--hy-section-divider: 2px solid var(--hy-section-divider-color);

--hy-element-border-secondary: 2px solid var(--hy-element-border-secondary-color);
--hy-element-border-accent: 2px solid var(--hy-accent-color);
--hy-element-border-error: 2px solid var(--hy-invalid-font-color);

--hy-element-margin-value: 0.9rem;
--hy-element-margin: var(--hy-element-margin-value) 0;
--hy-element-padding: 0.75rem;
--hy-element-padding-md: 0.5rem;
--hy-element-padding-sm: 0.25rem;

--hy-element-transition: none 0.2s ease-in-out;
--hy-tabbar-transition: none 0.3s cubic-bezier(0.19, 1, 0.22, 1);
--hy-element-shadow: 0px 4px 8px -2px var(--hy-element-shadow-color);
--hy-element-border-radius: 0.5rem;

--hy-popover-shadow: 0 0 32px 15px var(--hy-popover-shadow-color);
--hy-dropdown-top-shadow: 0px 0px 8px 2px var(--hy-element-shadow-color); // If dropdown expands to the top, the dividing shadow must also spread to the top
--hy-dropdown-bottom-shadow: var(--hy-element-shadow);

// Navigation
--hy-tabbar-shadow: 0 0 25px 5px var(--hy-tabbar-shadow-color);
--hy-sidebar-shadow: 0 0 25px 5px var(--hy-sidebar-shadow-color);
--hy-header-shadow-cover: 0px 0px 18px 15px var(--hy-body-bg-color);

General Variables adjusted on mobile

(if device width is smaller than 600px)

--hy-font-size: 18px;
--hy-element-padding: 0.72rem;
--hy-section-padding: 1rem;

Lightmode colors

--hy-font-color-white: white;
--hy-font-color-black: hsl(210, 29%, 24%);
--hy-font-color-gray: hsl(208, 7%, 46%);

--hy-font-color-contrast: var(--hy-font-color-black); // Default in light theme => "Contrast" to the background color
--hy-font-color-match: var(--hy-font-color-white);

// General
--hy-body-bg-color: hsl(240, 13%, 94%);
--hy-loader-ring-bg-color: hsl(0, 0%, 87%);

// Theme Colors
// NOTE: colors are defined by brand theme
--hy-color-gray-1: hsl(210, 14%, 89%);
--hy-color-gray-2: hsl(210, 16%, 93%);
--hy-color-gray-3: hsl(210, 17%, 97.5%);

// Sections: Colors
--hy-section-shadow-color: hsla(0, 0%, 41%, 0.1);
--hy-section-bg-color: white;

// Element: Others
--hy-element-shadow-color: hsla(0, 0%, 72%, 0.33);
--hy-element-border-secondary-color: hsl(231, 9%, 84%);
--hy-section-divider-color: hsl(0, 0%, 88%);
--hy-gray-tabbar-bg-color: hsl(210, 17%, 96%);
--hy-gray-tabbar-ghost-color: var(--hy-section-bg-color);

// Variants: colors for "primary" variant
--hy-variant-primary-bg-color: var(--hy-accent-color); // TODO: is this needed?
--hy-variant-primary-hover-color: var(--hy-accent-hover-color);

// Variants: colors for "secondary" variant
--hy-variant-secondary-font-color: var(--hy-font-color-contrast);
--hy-variant-secondary-bg-color: var(--hy-section-bg-color);
--hy-variant-secondary-hover-color: hsl(0, 0%, 96%);
--hy-variant-secondary-border-color: var(--hy-element-border-secondary-color);
--hy-variant-secondary-border-color-pressed: var(--hy-accent-color);

// Variants: colors for "ghost" and "ghost-bg" variant
--hy-variant-ghost-font-color: var(--hy-font-color-contrast);
--hy-variant-ghost-bg-color: hsla(230, 11%, 85%, 0.145);
--hy-variant-ghost-hover-color: hsla(230, 11%, 72%, 0.145);
--hy-variant-ghost-border-color: var(--hy-accent-color);

// Invalid / error states
--hy-invalid-bg-color: hsla(0, 75%, 49%, 0.216);
--hy-invalid-font-color: hsl(340, 82%, 49%);

// Modal
--hy-modal-bg-color: var(--hy-section-bg-color);
--hy-modal-cover-color-mobile: hsla(0, 0%, 26%, 0.6);
--hy-modal-cover-color-desktop: hsla(0, 0%, 100%, 0.5);
--hy-modal-shadow-color: hsla(0, 0%, 37%, 0.4);

// Popover
--hy-popover-shadow-color: hsla(0, 0%, 41%, 0.17);
--hy-popover-bg-color-match: var(--hy-section-bg-color);
--hy-popover-bg-color-contrast: hsl(220, 5%, 13%); // Darkmode section-bg-color
--hy-popover-border-color-match: var(--hy-color-gray-1);
--hy-popover-border-color-contrast: hsl(210, 9%, 31%); // Darkmode color-gray-1

// Navigation
--hy-tabbar-shadow-color: hsla(0, 0%, 81%, 0.56);
--hy-sidebar-shadow-color: var(--hy-tabbar-shadow-color);

Darkmode colors

--hy-font-color-white: hsl(0, 0%, 80%);
--hy-font-color-black: hsl(0, 0%, 20%);
--hy-font-color-gray: hsl(208, 7%, 46%);

--hy-font-color-contrast: var(--hy-font-color-white); // Default in dark theme => "Contrast" to the background color
--hy-font-color-match: var(--hy-font-color-black);

// General
--hy-body-bg-color: hsl(240, 9%, 5%);
--hy-accent-color: var(--hy-color-blue);
--hy-loader-ring-bg-color: hsl(0, 0%, 20%);

// Theme Colors
// NOTE: colors are defined by brand theme
--hy-color-gray-1: hsl(210, 9%, 31%);
--hy-color-gray-2: hsl(210, 10%, 23%);
--hy-color-gray-3: hsl(207, 11%, 9%);

// Sections: Colors
--hy-section-shadow-color: hsla(0, 0%, 3%, 0.5);
--hy-section-bg-color: hsl(210, 11%, 11%);

// Element: Others
--hy-element-shadow-color: hsla(0, 0%, 0%, 0.4);
--hy-element-border-secondary-color: hsl(210, 11%, 23%);
--hy-section-divider-color: hsl(0, 0%, 27%);
--hy-gray-tabbar-bg-color: var(--hy-color-gray-3);
--hy-gray-tabbar-ghost-color: var(--hy-color-gray-2);

// Variants: colors for "primary" variant
--hy-variant-primary-bg-color: var(--hy-accent-color); // TODO: is this needed?
--hy-variant-primary-hover-color: var(--hy-accent-hover-color);

// Variants: colors for "secondary" variant
--hy-variant-secondary-font-color: var(--hy-font-color-contrast);
--hy-variant-secondary-bg-color: var(--hy-section-bg-color);
--hy-variant-secondary-hover-color: hsl(210, 11%, 10%);
--hy-variant-secondary-border-color: var(--hy-element-border-secondary-color);
--hy-variant-secondary-border-color-pressed: var(--hy-accent-color);

// Variants: colors for "ghost" and "ghost-bg" variant
--hy-variant-ghost-font-color: var(--hy-font-color-contrast);
--hy-variant-ghost-bg-color: hsla(224, 9%, 30%, 0.15);
--hy-variant-ghost-hover-color: hsla(224, 9%, 30%, 0.25);
--hy-variant-ghost-border-color: var(--hy-accent-color);

// Invalid / error states
--hy-invalid-bg-color: hsla(0, 75%, 49%, 0.216);
--hy-invalid-font-color: hsl(340, 82%, 49%);

// Modal
--hy-modal-bg-color: var(--hy-section-bg-color);
--hy-modal-cover-color-mobile: hsla(0, 0%, 0%, 0.85);
--hy-modal-cover-color-desktop: hsla(0, 0%, 0%, 0.85);
--hy-modal-shadow-color: hsl(0, 0%, 0%);

// Popover
--hy-popover-shadow-color: hsla(0, 0%, 3%, 0.5);
--hy-popover-bg-color-match: var(--hy-section-bg-color);
--hy-popover-bg-color-contrast: white; // Lightmode section-bg-color
--hy-popover-border-color-match: var(--hy-color-gray-1);
--hy-popover-border-color-contrast: hsl(210, 14%, 89%); // Lightmode color-gray-1

// Navigation
--hy-tabbar-shadow-color: hsla(0, 0%, 0%, 0.6);
--hy-sidebar-shadow-color: var(--hy-tabbar-shadow-color);

Tips and tricks

On the following pages we want to share some tips and tricks as well as important defaults and gotchas.

Z-Index guide

Component Value Can be changed with zIndex property
HyFloatingBadge 10 No
HyCheckbox 1 No
HyRadioButton 1 No
HyToggle 1 No
HyTabbar 5 No
HyDropdown 10 Yes
HyPopover 10 Yes
HyModal 100 Yes
HySmartMenu 200 Yes
HyHeader 50 Yes
HyNavigationContainer > #sidebar 101 No
HyNavigationSidebar 101 No
HyNavigationTabbar 100 No

Changing the font-size

Nearly all sizes/paddings/margins etc. in HyperUI are derived from the --hy-font-size css custom property. If you want to scale down/up the UI, then simply change this property.

On mobile, the --hy-font-size is automatically decreased by the library. If you wish so, you may also overwrite this.

Look into CSS Variables for reference.

Desktop and mobile mode

In HyperUI, the device is considered a desktop device when the screen width is equal to or larger than 800px. If the screen width is at 799px or smaller, the device is considered a mobile device. Some components might change their behaviour/look based on whether the device is a desktop or mobile device.

Recommended navigation code structure

HyperUI is an opinionated UI library. We thus recommend the following code structure when setting up a navigation system with Vue Router:

In App.vue:

<hy-navigation-container>
    <template #sidebar>
        <hy-navigation-sidebar>
            <!-- Sidebar content -->
        </hy-navigation-sidebar>
    </template>

    <template #tabbar>
        <hy-navigation-tabbar>
            <!-- Tabbar content -->
        </hy-navigation-tabbar>
    </template>

    <template #content>
        <router-view></router-view>
    </template>
</hy-navigation-container>

And then in every View:

<hy-header headline="Headline of this view" maxWidth="800px" :resizeTo="90">
    <!-- Some buttons or whatever -->
</hy-header>

<hy-main maxWidth="800px" :resizeTo="90">
    <!-- View content -->
</hy-main>

Using this structure is the intended way of using the navigation components HyperUI provides and ensures good looking alignment in regards to screen edges and other elements.
As you can see in the example, use the same values for the maxWidth and resizeTo properties on both the header and main component.

How v-model works

Often, components use v-model. This directive allows these components to sync a state variable between the component and the parent Vue instance. You may want to read this introduction from the official Vue docs.
Essentially, v-model="someVariable" is a shorthand for :modelValue="someVariable" @update:modelValue="newValue => someVariable = newValue".

So these two pieces of code do the same thing:

<hy-input v-model="someVariable" />

<hy-input :modelValue="someVariable" @update:modelValue="newValue => someVariable = newValue" />

This extended syntax allows for more customization, so you could, for example, call a method if the modelValue changes.

If you see a modelValue attribute that is required in the docs for a HyperUI component, than this is just a fancy way of saying that this components needs a v-model binding to do its job. Often we use v-model to sync an important state of an component, like whether the modal is open or not.

Working with slots

Some components not only support one slot, but multiple. Look for the Slots section in the component documentation for an overview about which slots your component supports.

When planning to use multiple slots, named slots come into play. Please read this article about what these are.

In short:

  • Use the <template #nameOfSlot> ... </template> syntax to address named slots
  • Sometimes, a slot is also aliased as the "default slot"
  • If you just want to use the default slot, you don't need to use the <template #nameOfSlot> ... syntax
  • Once you want to fill multiple slots, then also the default slot has to use the <template #nameOfSlot> ... syntax
  • If a component just has one slot, then it is always aliased as the default slot -> you can use it without the <template #nameOfSlot> ... syntax

Re-style components

Sometimes it may be necessary to update the styles of a component. If you just want to re-style a section, that's easy. But it becomes more difficult if you are working with scoped css and want to update a child node of a component, e.g. the visual of a button.

First, we need to understand how some components are build. Many of them are nested inside a container which is responsible for tasks such as positioning elements or itself in a parent.

A child of this container would be the actual <button> element (for example), which has default css properties like a background-color or a border-radius. If you want to change these, but still continue working within scoped css, you will quickly realize that you are able to style the container (by selecting it with the correct class; see component docs), but not so easy the actual button.

To work around these issues, Vue proposes to using the :deep() pseudo-class, or you can style the elements from a non-scoped css block.

With :deep()

<style scoped>
    .hy-button :deep(button) {
        background-color: yellow;
    }
</style>

Styling outside of a scoped environment

<style scoped>
    /* Other styles */
</style>

<style>
    .hy-button button {
        background-color: yellow;
    }
</style>

You may also need to make these rules !important, depending on your selector specificity.

Changelogs

Version 4.0.0

  • Rewrote HyPopover resulting in a breaking change regarding it and the HySmartMenu component
    • Please see the Breaking Changes
    • HyPopoverFree and SmartMenuFree have been removed as a result of this change
  • Added the HyTooltip component
  • Added the HyListItem component
  • Added the HyNotes component
  • Added the HyFilterButton component
  • Added Brand Themes
  • Input, TextArea, Dropdown, SelectDropdown, Select: added support for variant
  • Tabbar: added support for size
  • Modal, Popover, SmartMenu: added new footer slot
  • ListIcon: Support passing an icon via prop (for icon fonts)
  • Support setting variant as a global default (for supported elements)
  • Bugfixes regarding body-scroll-lock when used by multiple components simultaneously
  • Renamed props for a more consistent experience
  • Renamed element variants
  • Renamed size options
  • Prefixed CSS variables with --hy-

Version 3.3.0

  • Navigation Sidebar
    • Redesign
    • Collapsable
    • Sidebar now supports mobile
  • Added invalid option to Select, SelectDropdown, Dropdown and TextArea
  • Header: refactored aligment -> new options and no longer dependent on HyMain
  • Modal: new header slot
  • Dropdown: new title slot as an alternative to the prop
  • All Popovers, all SmartMenus
    • the menu/popover slots have been renamed to content
    • added support for headline and description prop and header slot

Version 3.2.0

  • Added resizable split view component
  • Added dropdown component
  • Added dropdown-select component as an alternative style to the hy-select component
  • Input: Support for showing an invalid state
  • Header: Added a second "left" slot
  • Modal: Added blur background (doBlurBg property)
  • Modal: Added headline and description property
  • Tabbar: added new design option
  • Updated color scheme
  • Added --color-gray-font property and .hy-text-gray class as an alternative to color: gray
  • Bugfixes

Version 3.1.0

  • HyperUI now automatically adds the hy-modals-container and hy-popovers-container to the DOM. You may now remove them from your codebase.

Version 3.0.0

  • Added hy-smart-menu and hy-smart-menu-free as a compromise between a modal and a popover
  • Added hy-header component
  • Added hy-progress-bar component
  • Added size option to Button, Input and Select components
  • Added new ghost-bg variant options for Button component
  • Section now also supports title, pre and post
  • Section and Sub-Sections can now be collapsed
  • Redesigned hy-table
  • Added option to show a progress bar instead of a loading spinner on supported components

Attention: we changed the target classes of elements to reflect new naming scheme -> See Breaking Changes for additional updates

Version 2.6.0

  • Added Free-Floating hy-popover-free as an alternative to the fixed hy-popover. This component can be attached to multiple target elements
  • If a device supports touch events, modals can now be closed by swiping
  • Darkmode: Primaries now use the blue accent color
  • Added maxWidth and maxHeight property to popovers
  • Added .hy-remove-leading-margins utility class
  • Added .hy-remove-trailing-margins utility class

Version 2.5.0

  • Redesign modal for desktop devices

Version 2.4.0

  • Added navigation related components:
    • Added NavigationContainer component, that switches between a tabbar and a sidebar
    • Added NavigationSidebar component
    • Added NavigationTabbar component
  • Added a toggle "checkbox" component
  • Added an iOS inspired ListIcon component
  • Tweaked background-color of ghost buttons
  • Tweaked darkmode colors
  • Added hy-extend-full utility class
  • Added hy-text-[COLOR] utility classes
  • Added icons for HyInput and HySelect
  • --font-color-dark & --font-color-bright are DEPRECATED, use --font-color-contrast and font-color-similar instead
  • Added .hy-remove-leading-trailing-margins utility class

Version 2.3.0

  • Added dropzones for easier file reading and uploading

Version 2.2.0

  • Added radio buttons

Version 2.1.0

  • Added floating badges
  • Renamed utility classes to include the hy- prefix. Old utility class names are DEPRECATED

Version 2.0.0

  • Renamed components to include the prefix "Hy"
  • Attention: CSS variable names have changed
  • Switched to a new bundler => You're required to import the styles for yourself
  • New light and ghost colored button style
  • Modals
  • Popovers & Tooltips
  • New sub-section component
  • Inputs now support non-string values. But, it may still return a string if the user changes the value
  • Checkboxes now have a right aligned mode
  • Select between "light" and "dark" theme, or just use both of them automatically with config value "system"
  • Docs for CSS variables
  • Adjusted theme colors
  • Section Border Radius CSS variable
  • .section-shadow utility class
  • Docs for :deep() pseudo-class in re-style components
  • Bugfixes

Version 1.4.0

  • Color theme updates:
    • New Dark Blue instead of Black
    • New Accent Color is based on a red color (Light- & Darkmode)
  • Buttons will have a default font-weight of bold
  • New .fontWeightNormal utility class. Reverts the previously noticed changes to a font-weight of normal.
  • New .fontWeightBold utility class.
  • New .borderAccent utility class. Turns the border color of a button (or a similar element) into the accent color.

Version 1.3.0

  • Added TextAreas
  • Buttons got a new, ghost Style
  • New .textAccent utility class for easily changing the text color to the accent color. Developed for being used with the new Button Style
  • Use Vue $attrs for Inputs & Texareas (more info in the component docs)

Version 1.2.0

  • Flex: Use gap property withing flex-containers
  • Flex: Removed the generic 5px margin
  • Attention: Safari has been supporting the gap property since May 2021 which means not a lot of people have received the update yet. Consider waiting to update this library!
  • Added a tabbar
  • Elements get smaller on mobile screens

Version 1.1.0

  • Button: New accent-color style
  • Updated accent colors to orange colors
  • Switched colors for section and body background in darkmode

Readme

Keywords

none

Package Sidebar

Install

npm i @jaaahn/hyper-ui

Weekly Downloads

194

Version

4.0.4

License

MIT

Unpacked Size

1 MB

Total Files

54

Last publish

Collaborators

  • jaaahn
Try on RunKit
Report malware