x
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="space-y-4 p-4"> <div> <div class="form-field-wrapper"> <label for="resize_none" class="block font-medium text-gray-700 mb-1 text-sm"> Resize: none </label> <div class="relative flex items-center"> <textarea name="resize_none" placeholder="This textarea has resize: none" class="block w-full rounded-md border shadow-sm transition-colors duration-200 text-base py-2 px-4 border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-20 focus:outline-none resize-none" rows="4"></textarea> </div> <div class="block text-gray-600 mt-1 text-sm"> Cannot be resized </div> </div> </div> <div> <div class="form-field-wrapper"> <label for="resize_vertical" class="block font-medium text-gray-700 mb-1 text-sm"> Resize: vertical </label> <div class="relative flex items-center"> <textarea name="resize_vertical" placeholder="This textarea has resize: vertical" class="block w-full rounded-md border shadow-sm transition-colors duration-200 text-base py-2 px-4 border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-20 focus:outline-none resize-y" rows="4"></textarea> </div> <div class="block text-gray-600 mt-1 text-sm"> Try resizing this textarea </div> </div> </div> <div> <div class="form-field-wrapper"> <label for="resize_horizontal" class="block font-medium text-gray-700 mb-1 text-sm"> Resize: horizontal </label> <div class="relative flex items-center"> <textarea name="resize_horizontal" placeholder="This textarea has resize: horizontal" class="block w-full rounded-md border shadow-sm transition-colors duration-200 text-base py-2 px-4 border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-20 focus:outline-none resize-x" rows="4"></textarea> </div> <div class="block text-gray-600 mt-1 text-sm"> Try resizing this textarea </div> </div> </div> <div> <div class="form-field-wrapper"> <label for="resize_both" class="block font-medium text-gray-700 mb-1 text-sm"> Resize: both </label> <div class="relative flex items-center"> <textarea name="resize_both" placeholder="This textarea has resize: both" class="block w-full rounded-md border shadow-sm transition-colors duration-200 text-base py-2 px-4 border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-20 focus:outline-none resize" rows="4"></textarea> </div> <div class="block text-gray-600 mt-1 text-sm"> Try resizing this textarea </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="space-y-4 p-4"> <% [ :none, :vertical, :horizontal, :both ].each do |resize_type| %> <div> <%= render BetterUi::Forms::TextareaComponent.new( name: "resize_#{resize_type}", label: "Resize: #{resize_type}", placeholder: "This textarea has resize: #{resize_type}", resize: resize_type, hint: resize_type == :none ? "Cannot be resized" : "Try resizing this textarea" ) %> </div> <% end %></div>No notes provided.
No params configured.