Olobase Component List

  1. Layout

  2. Listing

  3. Inputs

  4. Others

Layout

Layout, also known as VaLayout, is the main layout component that wraps the components shown in the following examples.

AppBar

AppBar is one of the main component that create components such as hierarchical menu and user profile with the Vuetify VNavigationDrawer component.

AppBar

Aside

It is a customizable view where you can put some additional information. VaAsideLayout component is used to integrate content from anywhere, in any context.

Aside

Breadcrumbs

Breadcrumbs utomatically creates hierarchical links from the current route using the v-breadcrumbs component.

Breadcrumbs

Footer

This area is the footer area that allows some corporate information to be displayed within the VFooter component.

SideBar

Messages

This component is used to show special status messages such as info, error, warning, success using the vuetify v-snackbar component.

Messages

Listing

The List component allows displaying the settings, filters and parent options of the data table.

DataTableServer

Using the Vuetify v-data-table-server component it is used to paginate a list that follows a grid structure. It includes features such as sorting, search, pagination, filtering and selection. The list layout within the default slot is fully customizable.

Advanced Filters

DataIteratorServer

Viewing data that does not fit the grid structure or needs to be customized using the Vuetify v-data-iterator component and is similar to the va-data-table-server component in terms of functionality. It also includes features such as sorting, search, pagination, filtering and selection. The list layout within the default slot is fully customizable.

Data Iterator Server

Inputs

Input components allow editing of specific properties of the current API resource object. It is mainly used in forms to create and edit views.

ArrayTableInput

It allows multiple data entries as arrays in tabular format. Supports adding new data, deleting and updating data.

ArrayTableInput

AutoCompleteInput

Allows selection of value or values from searchable options. Supports multiple selections and references. Allows searching for linked resources from your API service.

AutoCompleteInput

AvatarInput

It facilitates the creation of a user's profile picture with cutting and shrinking options.

AvatarInput

BooleanInput

When a value is sent to a boolean input type as boolean or 0/1, the input is displayed as a toggle button.

BooleanInput

CheckListInput

It enables the creation together of checkbox input components grouped under each other at the first level. Features such as the toggle feature, the ability to select all entries with a higher checkbox, and searching within the list are supported by default.

CheckListInput

ColorPickerInput

It creates the component that makes it easy to select HEX color codes.

ColorPickerInput

CurrencyInput

It displays the currency sent to it according to the desired format using the vue-currency-input component.

CurrencyInput

DateInput

It is used to edit the date type value. Vuetify consists of a read-only text field associated with the date picker. It does not support time value, use classic VaTextInput for this case.

DateInput

FileInput

Allows single line file uploads. Single or multi uploads are supported simultaneously. Use VaFileField or VaImageField with this element to show a preview of uploaded files.

FileInput

NumberInput

Optimized for number editing. Supports min, max and step features.

NumberInput

PasswordInput

Used for password fields. There is show/hide behavior for the current input.

PasswordInput

RadioGroupInput

Bir seçim listesinden değer seçmenizi sağlar. Referansları destekler. Hiçbir seçenek yoksa, varsayılan olarak, src/I18n/locales/tr.json dosyasından kaynak içeren yerelleştirilmiş listeleri alabilir.

Lets you select values from a selection list. Supports references. If no options are available, by default it can retrieve localized lists containing resources from src/I18n/locales/tr.json.

RadioGroupInput RadioGroupInput Horizontal

RatingInput

Edit the number value as rating stars. If half increments are enabled, the value must be a valid integer or decimal number. Icons can be edited via $ratingFull, $ratingEmpty and $ratingHalf in Vuetify settings.

RatingInput

RichTextInput

Create a WYSIWYG HTML editor using Trix.

RichTextInput

SelectInput

Lets you select a value or values from a selection list. Supports multiple selections and references. If no options are available, by default it can retrieve localized lists containing resources from src/I18n/locales/en.json.

SelectInput

SheetInput

It is the input component that allows you to read large amounts of Excel data and add it to the database in CLI mode. To save the imported data, it should be used with a sheet saving template that you have created yourself.

SheetInput

TextInput

Edits text for text value type via basic text input. Supports textarea mode for long texts via multi-line support. Can be used for any date, datetime or time arrangement; Use date, datetime-local, or time-based type. Processing will depend on browser support.

TextInput

Others

Components that do not meet all 3 items above are listed here under "Others".

LanguageSwitcher

The LanguageSwitcher component allows the user to specify the default language value.

LanguageSwitcher