Skip to content
Simple Vue user interface library
CSS Vue TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
docs
src
.browserslistrc
.editorconfig
.eslintrc.js
.gitignore
CHANGELOG.md
LICENSE
README.md
README.pug
babel.config.js
package.json
postcss.config.js
tsconfig.json
yarn.lock

README.md

Reino Vue Components

npm version Licence Netlify demo build

View demo & docs
Install


Modal

<r-modal
  title: string | false
  blocking: boolean // optional
  buttons: boolean // optional, set to false to hide bottom bar with buttons
  size: string  // optional, ("small" | "medium" | "large" | "huge" | "maximum")
>
  {{ modal content }}
  <template v-slot:buttons>
    {{ r-buttons }}
  </template>
</r-modal>

Confirmation modal

const result = await this.$root.rModalConfirm(
  "Question",
  "Confirm text", // optional
  "Cancel text", // optional
  "Description text", // optional
);

Tooltip

Tooltip directive v-rtip. Supports top (default), bottom, left and right alignment: v-rtip.bottom, v-rtip.left, v-rtip.right.

<div
  v-rtip="'Tooltip text'"
></div>

Button

Every property listed is optional. If button contains no childs but has an icon, it will be shown as an icon button (width equal to height).

  <r-button
    primary: boolean
    gray: boolean 
    borderless: boolean
    small: boolean
    fullwidth: boolean
    disabled: boolean
    loading: boolean  // Shows a loading spinner and disables the button
    submit: boolean  // default type="button", this sets it to "submit" (for forms)
    action: function  // @click handler
    actionWithModifier: function  // @click.ctrl.exact handler
    label: string  // aria-label, for icon only buttons
    icon: string  // One of valid r-icon icons
    icon-color: string  // ("gray" | "green" | "red" | "blue" | "link" | "white")
  >
    {{ text }}
  </r-button>

Grouped buttons

<div class="r-buttons-grouped">
  <div class="r-button-group">
    {{ r-buttons }}
  </div>
  <div class="r-button-group">
    {{ r-buttons }}
  </div>
</div>

Icon

Material or modified material icons as 24x24px svg.

<r-icon
  icon: string
  icon-color: string  // ("gray" | "green" | "red" | "blue" | "link" | "white")
/>

Toast notification

From any component, call this.$rNotifyToast("message");. Auto-hide timer is based on text length and paused if window is not currently visible.

Dark mode

Add class darkMode to any parent element.

Containers

Container sizes: r-container-tiny, r-container-small, r-container-medium, r-container-large, r-container-huge, r-container-maximum

For basic content container use class r-container and r-container-{size}.

For columns, use r-container-row on parent and if you want your row to have a maximum width add r-container-{size}. Use r-container-column for columns and add r-container-{size} to limit column size.

Add r-columns-mobile-{small|medium|large} to r-container-row to specify the breakpoint when columns should switch to block layout.

<div class="r-container r-container-{tiny|small|medium|large|huge|maximum}"></div>

<div class="r-container-row r-container-{tiny|small|medium|large|huge|maximum} r-columns-mobile-{small|medium|large}">
  <div class="r-container-column r-container-{tiny|small|medium|large|huge|maximum}"></div>
  <div class="r-container-column r-container-{tiny|small|medium|large|huge|maximum}"></div>
  <div class="r-container-column r-container-{tiny|small|medium|large|huge|maximum}"></div>
</div>

Typography

Semantic heading level and visual style is separated — headings are all reset to normal text. Use r-title-N for visually styling them.

Default font stack is "Inter", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" but Inter is not imported, if you want to use it instead of OS default fonts you have to add @import url('https://rsms.me/inter/inter.css') to your css.

You can override the font and weights using stylus variables. Font size and ratio affects spacing, this can be overridden using $spacing-base.

  • $font-sans font stack
  • $font-weight-sans-regular default 400
  • $font-weight-sans-medium default 500
  • $font-weight-sans-bold default 600
  • $line-height-base default 1.5
  • $font-size-base default 16px
  • $font-sizes-ratio default 1.333, used for generating heading sizes

Text style classes:

Weight: r-text-regular, r-text-medium, r-text-bold

Color: r-text-color-body, r-text-color-quiet, r-text-color-error

Size: r-text-small, r-title-1, r-title-2, r-title-3, r-title-4, r-title-5, r-title-6, r-title-caps

Alignment: r-text-left, r-text-center, r-text-right

Overflow: r-ellipsis### Tabs Basic tabs component.

<r-tabs
  extendLine: boolean  // Adds negative margin to the line between tabs and content, useful for top navigation tabs
  line: boolean  // Used to hide the line between tabs and content, this also removes any margin between tabs and content
>
  <r-tab-content
    name: string  // REQUIRED
    icon: string  // optional r-icon
  ></r-tab-content>
</r-tabs>

Form

Bind value with v-model. Same props (except type) apply for r-text-input and r-text-input-area

<div class="r-form-group">
  <r-text-input
    label: string
    placeholder: string
    helper-text: string
    invalid-message: string // setting this will mark the field as invalid
    type: string // default "text"
    fullwidth: boolean  // default true
  >
  </r-text-input>
</div>

Sheets

r-elevation-{0-4} to add text and background color that changes with dark mode. For example, main content area and sidebar/header.

r-border-radius add default border radius

r-border-radius-double add default * 2 border radius

Other

r-{"margin" | "padding"}-{direction}-{size} apply margin/padding to element

  • direction: top bottom left right
  • size: huge large medium small tiny none

r-media-hide-{"small" | "medium" | "large"} and r-media-show-{"small" | "medium" | "large"} to show/hide some items on small/medium/wide screens.

r-flex-container display flex, direction row

r-flex-container-column flex direction column

r-flex-items-{"start" | "center" | "end"} align flex childs

r-flex-{0-3} flex child grow and shrink value

r-clearfix clearfix

r-styled-scrollbar custom scrollbar style

Usage

Install

yarn add @rzuppur/rvc or npm install --save @rzuppur/rvc

import Vue from "vue";
import rvc from "@rzuppur/rvc";
import "@rzuppur/rvc/src/styles/main.styl";

Vue.use(rvc);

To customize Stylus variables, import main.styl in your app styles instead and override values before the import. View variables that can be themed here.

/* CUSTOMIZE VARIABLES HERE */
$color-text = green

/* IMPORT RVC MAIN.STYL HERE */
@import "../node_modules/@rzuppur/rvc/src/styles/main.styl"

Dev

Project setup

yarn install

Compiles and hot-reloads for development

yarn run demo

Compiles and minifies for production

yarn run build
You can’t perform that action at this time.