Skip to content

Commit

Permalink
docs: move wrappers documentation to public repository (#664)
Browse files Browse the repository at this point in the history
* docs(wrappers): move wrappers docs to public repo
  • Loading branch information
PekoPPT authored Jan 27, 2025
1 parent 34ad081 commit a8cf9c8
Show file tree
Hide file tree
Showing 1,799 changed files with 80,814 additions and 0 deletions.
692 changes: 692 additions & 0 deletions vue-wrappers-documentation/README.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
---
title: Barcode API
description: "API Index | Barcode"
api_reference: true
slug: api_barcodecomponent_wrapper
---

# Barcode

## Directive

`kendo-barcode`

## Props

### render-as `String`

Sets the preferred rendering engine. If `render-as` is not supported by the browser, the Barcode will switch to the first available mode ([`renderAs` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/renderas)).

The supported values are:

* `canvas`—Renders the Barcode as a `canvas` element, if available.
* `svg`—Renders the Barcode as inline SVG document, if available.

### background `String`

The background of the Barcode area. Accepts any valid CSS color string, including hex and rgb ([`background` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/background)).

### border `Object`

The border of the Barcode area ([`border` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/border)). The supported composite props are available in [`BorderProps`]({% slug api_barcode_borderprops_wrapper %}).

### checksum `Boolean`

If set to `true`, the Barcode will display the `checksum` digit next to the value in the text area ([`checksum` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/checksum)).

### color `String`

The color of the bar elements. Accepts any valid CSS color string, including hex and rgb ([`color` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/color)).

### height `Number`

The height (in pixels) of the Barcode ([`height` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/height)). Defaults to `100`.

### padding `Object`

The padding of the Barcode ([`padding` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/padding)). The supported composite props are available in [`PaddingProps`]({% slug api_barcode_paddingprops_wrapper %}).

### text `Object`

Can be set to a JavaScript object which represents the text configuration ([`text` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/text)). The supported composite props are available in [`TextProps`]({% slug api_barcode_textprops_wrapper %}).

### type `String`

The symbology (encoding) the Barcode will use ([`type` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/type)).

The supported values are:

* EAN8
* EAN13
* UPCE
* UPCA
* Code11
* Code39
* Code39Extended
* Code93
* Code93Extended
* Code128
* Code128A
* Code128B
* Code128C
* GS1-128
* MSImod10
* MSImod11
* MSImod1010
* MSImod1110
* POSTNET

### value `String`

The initial value of the Barcode ([`value` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/value)).

### width `Number`

The width (in pixels) of the Barcode ([`width` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/width)). Defaults to `300`.

## Methods

For more details about the methods available in the component's API please check [its Kendo UI for jQuery API documentation](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode#methods).

### kendoWidget

##### returns

Returns the Kendo UI Barcode instance.
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
title: borderProps API
description: "API Index | borderProps"
api_reference: true
slug: api_barcode_borderprops_wrapper
---

# BorderProps

### border-color `String`

The color of the border. Accepts any valid CSS color string, including hex and rgb.

### border-dash-type `String`

The dash type of the border.

### border-width `Number`

The width of the border.

## Suggested Links

* [`border` in Kendo UI Barcode for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/border)
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
title: paddingProps API
description: "API Index | paddingProps"
api_reference: true
slug: api_barcode_paddingprops_wrapper
---

# PaddingProps

### padding-bottom `Number`

The bottom padding of the Barcode.

### padding-left `Number`

The left padding of the Barcode.

### padding-right `Number`

The right padding of the Barcode.

### padding-top `Number`

The top padding of the Barcode.

## Suggested Links

* [`padding` in Kendo UI Barcode for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/padding)
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: textProps API
description: "API Index | textProps"
api_reference: true
slug: api_barcode_textprops_wrapper
---

# TextProps

### text-color `String`

The color of the text. Accepts any valid CSS color string, including hex and rgb.

### text-font `String`

The font of the text.

### text-margin-bottom `Number`

The bottom margin of the text.

### text-margin-left `Number`

The left margin of the text.

### text-margin-right `Number`

The right margin of the text.

### text-margin-top `Number`

The top margin of the text.

### text-visible `Boolean`

If set to `false`, the Barcode will not display the value as a text below the barcode lines.

## Suggested Links

* [`text` in Kendo UI Barcode for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode/configuration/text)
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: borderProps API
description: "API Index | borderProps"
api_reference: true
slug: api_qrcode_borderprops_wrapper
---

# BorderProps

### border-color `String`

The color of the border. Accepts any valid CSS color string, including hex and rgb.

### border-width `Number`

The width (in pixels) of the border. By default, the border width is set to `zero` which means that the border will not appear.

## Suggested Links

* [`border` in Kendo UI Barcode for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode/configuration/border)
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
---
title: QRCode API
description: "API Index | QRCode"
api_reference: true
slug: api_qrcodecomponent_wrapper
---

# QRCode

## Directive

`kendo-qrcode`

## Props

### background `String`

The background color of the QRCode ([`background` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode/configuration/background)). Accepts any valid CSS color string, including hex and rgb.

### border `Object`

The border of the QRCode ([`border` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode/configuration/border)). The supported composite props are available in [`BorderProps`]({% slug api_qrcode_borderprops_wrapper %}).

### color `String`

The color of the QRCode ([`color` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode/configuration/color)). Accepts any valid CSS color string, including hex and rgb.

### encoding `String`

The encoding mode used to encode the value ([`encoding` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode/configuration/encoding)).

The supported values are:

* `ISO_8859_1`—Supports all characters from the ISO/IEC 8859-1 character set.
* `UTF_8`&mdashh;Supports all Unicode characters.

### error-correction `String`

The error correction level that is used to encode the value ([`errorCorrection` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode/configuration/errorcorrection)).

The supported values are:

* `L`—Approximately seven percent of the code-words can be restored.
* `M`—Approximately 15% of the code-words can be restored.
* `Q`—Approximately 25% of the code-words can be restored.
* `H`—Approximately 30% of the code-words can be restored.

### padding `Number`

Sets the minimum distance in pixels that should be left between the border and the QR modules ([`padding` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode/configuration/padding)).

### render-as `String`

Sets the preferred rendering engine ([`renderAs` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode/configuration/renderas)). If `render-as` is not supported by the browser, the QRCode will switch to the first available mode.

The supported values are:

* `canvas`—Renders the QRCode as a `canvas` element, if available.
* `svg`—Renders the QRCode as an inline SVG document, if available.

### size `Number | String`

Specifies the size (in pixels) of the QRCode, for example, `200px` ([`size` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode/configuration/size)). Numeric values are treated as pixels. If no size is specified, the `size` will be determined from the width and height of the element. If the element has zero width or height, it will use the default value of 200 pixels.

### value `Number | String`

The value of the QRCode ([`value` in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode/configuration/value)).

## Methods

For more details about the methods available in the component's API please check [its Kendo UI for jQuery API documentation](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/qrcode).

### kendoWidget

##### returns

Returns the Kendo UI QRCode instance.
15 changes: 15 additions & 0 deletions vue-wrappers-documentation/kendo-barcodes-vue-wrapper/api/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
title: Barcodes API
page_title: Barcodes API - Components - Kendo UI for Vue
description: "List of API members in the @progress/kendo-barcodes-vue-wrapper package, part of Kendo UI for Vue."
slug: api_barcodes_wrapper
api_reference: true
position: 1
---

# Barcodes API

## Components

* [`kendo-barcode`]({% slug api_barcodecomponent_wrapper %})
* [`kendo-qrcode`]({% slug api_qrcodecomponent_wrapper %})
31 changes: 31 additions & 0 deletions vue-wrappers-documentation/kendo-barcodes-vue-wrapper/barcode.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
title: Barcode
page_title: Overview - Barcode - Kendo UI for Vue
description: "Get an overview of the features the Kendo UI Barcode wrapper for Vue delivers and use the component in Vue projects."
slug: overview_barcode_wrapper
position: 1
---

<div><WrapperBanner></WrapperBanner></div>

# Barcode Overview

Barcodes represent data in a machine-readable format and support [symbologies](https://docs.telerik.com/kendo-ui/controls/barcodes/barcode/encodings#supported-symbologies).

All graphics are rendered on the client in a [Scalable Vector Graphics (SVG)](https://www.w3.org/Graphics/SVG/) format.

The Barcode wrapper for Vue is a client-side wrapper for the [Kendo UI Barcode](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode) widget.

## Basic Usage

The following example demonstrates the Barcode in action.

{% meta height:400 %}
{% embed_file barcode/barcode/main.vue preview %}
{% embed_file barcode/barcode/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI Barcode for jQuery](https://docs.telerik.com/kendo-ui/controls/barcodes/barcode/overview)
* [API Reference of the Barcode Widget](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/barcode)
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { createApp } from 'vue'
import App from './main.vue'

createApp(App).mount('#app')

Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<template>
<div>
<barcode :value="2346722"
:type="'ean8'"
:width="280"
:height="100">
</barcode>
<barcode :value="barcodeValue"
:width="280"
:height="100">
</barcode>
<h4>Enter a number:</h4>
<numerictextbox type="number"
title="number"
:value="100000"
:min="0"
:max="10000000000000"
v-model="barcodeValue"
:format="'n0'">
</numerictextbox>
</div>
</template>
<script>
import { Barcode } from '@progress/kendo-barcodes-vue-wrapper';
import { NumericTextBox } from '@progress/kendo-inputs-vue-wrapper';
export default {
name: 'App',
components: {
'barcode': Barcode,
'numerictextbox': NumericTextBox,
},
data: function() {
return {
barcodeValue: 1234
}
}
}
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { createApp } from 'vue'
import App from './main.vue'

createApp(App).mount('#app')

Loading

0 comments on commit a8cf9c8

Please sign in to comment.