Revel
GitHub
GitHub
  • Overview

    • Getting started
    • FAQ
    • Release notes
  • Foundations

    • Meet the standard
    • Accessibility
    • Internationalization
    • Information hierarchy
    • Speed
  • Design

    • Visual principles
    • Colors
    • Space
    • Icons
    • Typography
  • Design tokens
  • Style helpers
  • Content

    • Express your ideas
    • Actionable language
    • Inclusive and accessible language
    • Alternative text
    • Grammar and mechanics
      • Basics
      • Capitalization
      • Dates and units of measurement
      • Punctuation
  • Components

    • Alert
    • Avatar
    • Badge
    • Button
    • Button group
    • Checkbox
    • Date Input
      • dates
      • datetimes
      • ranges
    • Field group
    • File upload
    • Flex
    • Grid
    • Icon
    • Image
    • Input
    • Loader
    • Modal
    • Month picker
    • Pagination
    • Popper
    • Radio
    • Repeater
    • Select
    • Tabs
    • Tile
    • Toast
    • Toggle
  • Directives

    • Click outside
    • Tooltip

Tab

Usage

r-tabs required slot must be filled by multiple r-tab components.

Examples

Define a preselected tab by passing its index to preselectedTab prop.

tabs-preselected.vue

Add custom styles with props like divided, menuClass or contentClass.

tabs-styled.vue

Use to prop to navigate to routes from tabs.

tabs-router.vue

r-tabs API

Props

NameTypeDefaultDescription
dividedbooleanfalse

Define style of the tabs, are them divided or not

menuClassstring''

Specify classes of the tabs

contentClassstring''

Specify classes of the content

preselectedTabnumber0

Define preselected tab

Slots

NameDescription
default

Tab content

Events

NameDescription
tab-selectedWhen the tab is selected

r-tab API

Props

NameTypeDefaultDescription
namestring

panelIdstring''

valuestring''

activebooleanfalse

toOptional<Ref<RouteLocation>>undefined

hiddenbooleanfalse

Slots

NameDescription
default

Required slot with the content of the tab (can be any html markup or vue components).

Edit this page
Last Updated: 7/6/23, 6:53 AM
Contributors: Alberto Gualis, John Hannagan, Weetbix
Prev
Select
Next
Tile