UI

Avatar

import { Avatar } from 'goodteditor-ui';

loading

round

src

size

alt

color

background

Badge

import { Badge } from 'goodteditor-ui';

badge

Collapse

import { Collapse } from 'goodteditor-ui';

Example using headericon-* slots

My header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.

Example using heading slot

My header

ColorPicker

import { ColorPicker } from 'goodteditor-ui';

model: #ff00ff

Datalist

import { Datalist } from 'goodteditor-ui';

DatePicker

import { DatePicker } from 'goodteditor-ui';

Simple example

model:

range

Февраль

Пн

Вт

Ср

Чт

Пт

Сб

Вс

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

1

Min, max, allowed etc

model:

Февраль

Пн

Вт

Ср

Чт

Пт

Сб

Вс

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

1

Range example

model: []

Февраль

Пн

Вт

Ср

Чт

Пт

Сб

Вс

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

1

Extended example using slots

model:

Февраль

Пн

Вт

Ср

Чт

Пт

Сб

Вс

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

1

EditableText

import { EditableText } from 'goodteditor-ui';

Simple example

readonly

model: hello world

hello world

Advanced example. Edit on double-click, large size & custom validation

readonly

model: hello world

hello world

FileSelector

import { FileSelector } from 'goodteditor-ui';

select file

[]

Advanced demo: multiple image selection with preview

select images

Grid

import { Grid } from 'goodteditor-ui';

John Wick

john.wick@site.com

online

Using wrapper element

John Wick

john.wick@site.com

online

Image

import { Image } from 'goodteditor-ui';

String:

File:

select local image

Promise:

import() image

InputAutocomplete

import { InputAutocomplete } from 'goodteditor-ui';

Simple example

value:

Advanced example. Async filtering, debounce, slots

value:

InputColorPicker

import { InputColorPicker } from 'goodteditor-ui';

Simple example

value: #f00

Advanced example. Slots

value: #f00

InputDatePicker

import { InputDatePicker } from 'goodteditor-ui';

Simple example

value:

range

Advanced example. Custom format, slots etc

value: []

DP

InputTags

import { InputTags } from 'goodteditor-ui';

Simple example

value: [ "hello", "world" ]

hello

world

Advanced example. Slots

value: [ "hello", "world" ]


                hello [x]


                world [x]

InputTimePicker

import { InputTimePicker } from 'goodteditor-ui';

Simple example

value: 16:45

InputUnits

import { InputUnits } from 'goodteditor-ui';

value: 100px

px

Lazy

import { Lazy } from 'goodteditor-ui';

Lazy list: 1000 items (see devtools)

Pagination

import { Pagination } from 'goodteditor-ui';

Simple example

1

2

3

4

5

6

7

...

25

Advance example. Slots, sync

2

3

4

5

6

7

...

25

import { Paginator } from 'goodteditor-ui';

1. Lorem

2. ipsum

3. dolor

4. sit

5. amet,

1

2

3

4

5

6

import { Popover } from 'goodteditor-ui';

import { Popup } from 'goodteditor-ui';

Simple example

modal

fullscreen

usePadding

showCloseButton

open popup

ResponsiveContainer

import { ResponsiveContainer } from 'goodteditor-ui';

Tile width:

John Wick

john.wick@site.com

| 790×99

Select

import { Select } from 'goodteditor-ui';

Simple example

container overflow: auto

appendToBody

multiple

nullish value

model:

Advanced example. Using value object, multi selection, slots

vue

model: [ { "value": "vue", "label": "vue" } ]

Runtime options

multiple

toggle options

model: vue

TimePicker

import { TimePicker } from 'goodteditor-ui';

Simple example

:

value: { "h": 18, "m": 50 }

import { Tooltip } from 'goodteditor-ui';

Simple example

top

Advanced example. Using the trigger on 'click' and custom tooltip styling

WysiwygEditor

import { WysiwygEditor } from 'goodteditor-ui';

Simple example

This WYSIWYG is based on tiptap editor framework.

Advanced example. Using custom tool groups, bubble menu and 'change' event instead of 'input' to update the model

select text to see a formatting menu pop up