nb-button-prev-next

This is a prev/next button component for Vue.js 3+.

Loading component...

Installation

Yarn
yarn add @vlalg-nimbus/nb-buttons
NPM
npm install @vlalg-nimbus/nb-buttons

Usage

Vue 3
import { createApp } from 'vue'
import App from './App.vue'

import NbButtonsComponents from '@vlalg-nimbus/nb-buttons'
import "@vlalg-nimbus/nb-buttons/dist/style.css";

const app = createApp(App)
app.use(NbButtonsComponents)
app.mount('#app')
Nuxt 3
import NbButtonsComponents from '@vlalg-nimbus/nb-buttons'
import "@vlalg-nimbus/nb-buttons/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbButtonsComponents)
})

To use, simply call the component, in this case it will be NbButtonPrevNext or nb-button-prev-next.

Mode 1
<template>
  <NbButtonPrevNext />
</template>
Mode 2
<template>
  <nb-button-prev-next />
</template>
Mode 3
<template>
  <nb-button-prev-next></nb-button-prev-next>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
tabIndexPrevNumber0Defines the tab index for the preview button. Set this property to make the button focusable by the keyboard.
tabIndexNextNumber0Defines the tab index for the next button. Set this property to make the button focusable by the keyboard.
ariaLabelPrevString'Alternate Text Button'Defines the aria-label attribute for the preview button.
ariaAttrsPrevObject{}Allows passing custom aria attributes for the preview button as an object. Keys will automatically receive the aria- prefix. Example: { 'describedby': 'help-id', 'invalid': 'false' }
ariaLabelNextString'Alternate Text Button'Defines the aria-label attribute for the next button.
ariaAttrsNextObject{}Allows passing custom aria attributes for the next button as an object. Keys will automatically receive the aria- prefix. Example: { 'describedby': 'help-id', 'invalid': 'false' }
hasTabIndexEnterBooleantrueEnables the buttons to be activated with the Enter key when focused.
hasTabIndexSpaceBooleantrueEnables the buttons to be activated with the Space key when focused.
themeString'light'Defines the theme. Accepts dark and light. When theme is set, uses theme-specific color props.
paddingXNumber1Defines button content padding-left and padding-right.
paddingYNumber10Defines button content padding-top and padding-button.
marginBetweenNumber2Defines margin between buttons.
borderRadiusNumber6Defines border-radius.
disabledBooleanfalseDefines if the button is disabled
showPreviewBooleantrueDefines if show the preview button
showNextBooleantrueDefines if show the next button
disabledPreviewBooleanfalseDefines if the preview button is disabled
disabledNextBooleanfalseDefines if the next button is disabled
fontFamilyString"'Lato', sans-serif"Defines the font-family
fontSizeString'1.6em'Defines the font-size
fontWeightNumber400Defines the font-weight
lightColorPrimaryString'#f5f5f5'Defines the primary color (background) for light theme. Accepts Color name and Hex
lightColorSecondaryString'#e0e0e0'Defines the secondary color (background) for light theme. Accepts Color name and Hex
lightTextColorString'#333333'Defines the text color for light theme. Accepts Color name and Hex
lightTextColorHoverString'#000000'Defines the text color on hover for light theme. Accepts Color name and Hex
lightDisabledBgColorString'#dfdfd9'Defines the disabled background color for light theme. Accepts Color name and Hex
darkColorPrimaryString'#2d2d2d'Defines the primary color (background) for dark theme. Accepts Color name and Hex
darkColorSecondaryString'#3d3d3d'Defines the secondary color (background) for dark theme. Accepts Color name and Hex
darkTextColorString'#e0e0e0'Defines the text color for dark theme. Accepts Color name and Hex
darkTextColorHoverString'#ffffff'Defines the text color on hover for dark theme. Accepts Color name and Hex
darkDisabledBgColorString'rgba(40, 42, 54, 1)'Defines the disabled background color for dark theme. Accepts Color name and Hex

Events

nameReturn typeDescription
clickednothingFired when the button is clicked, returns nothing.

Slot

The component has two slots: prev for the preview button and next for the next button.

<template>
  <NbButtonPrevNext
    :nb-id="'nb-button-prev-next-one'"
    theme="light"
    aria-label-prev="Botão anterior"
    aria-label-next="Botão próximo"
    :aria-attrs-prev="{ 'describedby': 'prev-help' }"
    :aria-attrs-next="{ 'describedby': 'next-help' }"
    @clicked="logEvent($event)"
  >
    <template #prev>
      ← Anterior
    </template>
    <template #next>
      Próximo →
    </template>
  </NbButtonPrevNext>
</template>

<script setup>
defineOptions({
  name: 'CompPrevNext',
});

const logEvent = (type) => {
  console.log('clicked', type);
};
</script>

Example

Light Theme (default)

<template>
  <NbButtonPrevNext
    nb-id="nb-button-prev-next-light"
    theme="light"
    light-color-primary="#93c5fd"
    light-color-secondary="#60a5fa"
    light-text-color="#1e40af"
    light-text-color-hover="#ffffff"
    :padding-x="1"
    :padding-y="10"
    :margin-between="2"
    :border-radius="6"
    @clicked="logEvent($event)"
  >
    <template #prev>← Preview</template>
    <template #next>Next →</template>
  </NbButtonPrevNext>
</template>

<script setup>
defineOptions({
  name: 'CompPrevNext',
});

const logEvent = (type) => {
  console.log('clicked', type);
};
</script>

Dark Theme

<template>
  <NbButtonPrevNext
    nb-id="nb-button-prev-next-dark"
    theme="dark"
    dark-color-primary="#8b5cf6"
    dark-color-secondary="#7c3aed"
    dark-text-color="#a78bfa"
    dark-text-color-hover="#ffffff"
    :padding-x="1"
    :padding-y="10"
    :margin-between="2"
    :border-radius="6"
    @clicked="logEvent($event)"
  >
    <template #prev>← Preview</template>
    <template #next>Next →</template>
  </NbButtonPrevNext>
</template>

<script setup>
defineOptions({
  name: 'CompPrevNextDark',
});

const logEvent = (type) => {
  console.log('clicked', type);
};
</script>
Table of Contents