Components renaming (#225)
* refactor: eslint config adjusted for better diff's * refactor: stricter linting + dependencies updated * refactoring: paragraph component - component - docs * refactoring: heading component - component - docs * Update docs/components/heading.md Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com> * refactoring: link component - component - docs * refactoring: image component - component - docs * refactoring: alert component - component - docs * refactoring: avatar component - component - docs * refactoring: removed unnecessary code - component names come from the file name * refactoring: breadcrumb component - component - docs * refactoring: accordion component - component - docs * refactoring: buttom component - component - docs * refactoring: badge component - component - docs * refactoring: card component - component - docs * refactoring: order of components in docs updated * refactoring: unnecessary semicolons removed * refactoring: button group component - component - docs * refactoring: carousel component - component - docs * refactoring: dropdown component - component - docs * refactoring: footer component - component - docs * refactoring:list-group component - component - docs * refactoring: modal component - component - docs * refactoring: navbar component - component - docs * refactoring: pagination component - component - docs * refactoring: progress component - component - docs * refactoring: rating component - component - docs * refactoring: spinner component - component - docs * refactoring: table component - component - docs * refactoring: tabs component - component - docs * feat: Updated pagination examples * lint: Lister fixes * feat: Sidebar component and some fixes * feat: Input component * feat: Some fixes * feat: Some fixes * chore: update deps * refactor: removed old Modal component * refactor: radio component and some fixes * fix: fixed path error * refactor: Range component * refactoring: timeline component - component - docs * refactor: Select component * refactoring: toast component - component - docs * refactoring: tooltip component - component - docs * refactoring: sidebar component - component - docs * refactoring: input component - component - docs * refactoring: fileInput component - component - docs * refactoring: select component - component - docs * refactoring: textarea component - component - docs * refactoring: checkbox component - component - docs * refactoring: radio component - component - docs * refactoring: toggle component - component - docs * refactoring: range component - component - docs * local configs linted * documentation quick start updated * flowbite-themable refactored to fit new linters and style guide * random linter fixes * refactoring: toast-provider component - component - docs * final linter fixes * lint: Linter fixes * fix: Fixed types * fix: Fixed card component * docs: Updated card examples * fix: Fixed tabs * refactor: Heading component refactoring * Fwb rename - few fixes after component review (#237) * fix: button documentation * fix: model type in range examples * chore: Toast marked as WIP --------- Co-authored-by: Sqrcz <naorniakowski@slashlab.pl> Co-authored-by: Sqrcz <naorniakowski@gmail.com>
This commit is contained in:
Ilya Artamonov
GitHub
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import DefaultTextarea from './textarea/examples/DefaultTextarea.vue'
|
||||
import CommentTextarea from './textarea/examples/CommentTextarea.vue'
|
||||
import FwbTextareaExample from './textarea/examples/FwbTextareaExample.vue'
|
||||
import FwbTextareaExampleComment from './textarea/examples/FwbTextareaExampleComment.vue'
|
||||
</script>
|
||||
|
||||
# Vue Textarea - Flowbite
|
||||
@@ -17,49 +17,79 @@ Original reference: [https://flowbite.com/docs/forms/textarea/](https://flowbite
|
||||
|
||||
Get started with the default example of a textarea component below.
|
||||
|
||||
<fwb-textarea-example />
|
||||
```vue
|
||||
<template>
|
||||
<Textarea rows="4" placeholder="Write you message..." v-model="message" label="Your message" />
|
||||
<fwb-textarea
|
||||
v-model="message"
|
||||
:rows="4"
|
||||
label="Your message"
|
||||
placeholder="Write you message..."
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Textarea } from 'flowbite-vue'
|
||||
import { FwbTextarea } from 'flowbite-vue'
|
||||
|
||||
const message = ref('')
|
||||
</script>
|
||||
|
||||
```
|
||||
<DefaultTextarea />
|
||||
|
||||
## Comment box
|
||||
|
||||
Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.
|
||||
|
||||
<fwb-textarea-example-comment />
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<form>
|
||||
<Textarea custom rows="3" placeholder="Write you message..." label="Your message">
|
||||
<fwb-textarea
|
||||
v-model="message"
|
||||
:rows="3"
|
||||
custom
|
||||
label="Your message"
|
||||
placeholder="Write you message..."
|
||||
>
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between">
|
||||
<Button type="submit">Post comment</Button>
|
||||
<fwb-button type="submit">
|
||||
Post comment
|
||||
</fwb-button>
|
||||
<div class="flex">
|
||||
<Button color="" class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" square><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /></svg></Button>
|
||||
<Button color="" class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" square><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg></Button>
|
||||
<Button color="" class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" square><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg></Button>
|
||||
<fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color square>
|
||||
<svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</fwb-button>
|
||||
<fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square >
|
||||
<svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</fwb-button>
|
||||
<fwb-button class="rounded-lg hover:bg-gray-200 hover:dark:bg-gray-600" color="" square>
|
||||
<svg class="w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</fwb-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Textarea>
|
||||
</form>
|
||||
<p class="ml-auto text-xs text-gray-500 dark:text-gray-400">Remember, contributions to this topic should follow our <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline">Community Guidelines</a>.</p>
|
||||
<p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
|
||||
Remember, contributions to this topic should follow our
|
||||
<fwb-a href="#">Community Guidelines</fwb-a>.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Textarea } from 'flowbite-vue'
|
||||
import { ref } from 'vue'
|
||||
import { FwbA, FwbButton, FwbTextarea } from 'flowbite-vue'
|
||||
|
||||
const message = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
<CommentTextarea />
|
||||
|
||||
Reference in New Issue
Block a user