Home Explore Help
Sign In
SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git
1
0
Fork 0
Files
Branch: dev-modals
Branches Tags
tabler
/
preview
/
pages
/
modals.html

modals.html 2.6 KB
Permalink History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 
  1. ---
    2. 

  2. title: Modals
    3. 

  3. page-header: Modals
    4. 

  4. page-menu: base.modals
    5. 

  5. layout: default
    6. 

  6. permalink: modals.html
    7. 

  7. ---
    8. 

  8. 

  9. <div class="card">
    10. 

  10. 	<div class="card-body">
    11. 

  11. 		<div class="row g-5">
    12. 

  12. 	<div class="col-3">
    13. 

  13. 		<div class="list-group">
    14. 

  14. 			<a href="#modal-simple" class="list-group-item">Simple modal</a>
    15. 

  15. 			<a href="#modal-large" class="list-group-item">Large modal</a>
    16. 

  16. 			<a href="#modal-small" class="list-group-item">Small modal</a>
    17. 

  17. 			<a href="#modal-full-width" class="list-group-item">Full width modal</a>
    18. 

  18. 			<a href="#modal-scrollable" class="list-group-item">Scrollable modal</a>
    19. 

  19. 			<a href="#modal-report" class="list-group-item">Modal with form</a>
    20. 

  20. 			<a href="#modal-success" class="list-group-item">Success modal</a>
    21. 

  21. 			<a href="#modal-danger" class="list-group-item">Danger modal</a>
    22. 

  22. 			<a href="#modal-team" class="list-group-item">Modal with simple form</a>
    23. 

  23. 		</div>
    24. 

  24. 	</div>
    25. 

  25. 	<div class="col">
    26. 

  26. 		<div class="space-y-6">
    27. 

  27. 			<div>
    28. 

  28. 				<h3>Simple modal</h3>
    29. 

  29. 				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="simple" %}
    30. 

  30. 			</div>
    31. 

  31. 			<div>
    32. 

  32. 				<h3>Large modal</h3>
    33. 

  33. 				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="large" size="lg" %}
    34. 

  34. 			</div>
    35. 

  35. 			<div>
    36. 

  36. 				<h3>Small modal</h3>
    37. 

  37. 				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="small" size="sm" %}
    38. 

  38. 			</div>
    39. 

  39. 			<div>
    40. 

  40. 				<h3>Full width modal</h3>
    41. 

  41. 				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="full-width" size="full-width" %}
    42. 

  42. 			</div>
    43. 

  43. 			<div>
    44. 

  44. 				<h3>Scrollable modal</h3>
    45. 

  45. 				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="scrollable" scrollable=true style="max-height: 30rem" %}
    46. 

  46. 			</div>
    47. 

  47. 			<div>
    48. 

  48. 				<h3>Modal with form</h3>
    49. 

  49. 				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="report" size="lg" %}
    50. 

  50. 			</div>
    51. 

  51. 			<div>
    52. 

  52. 				<h3>Success modal</h3>
    53. 

  53. 				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="success" size="sm" %}
    54. 

  54. 			</div>
    55. 

  55. 			<div>
    56. 

  56. 				<h3>Danger modal</h3>
    57. 

  57. 				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="danger" size="sm" %}
    58. 

  58. 			</div>
    59. 

  59. 			<div>
    60. 

  60. 				<h3>Modal with simple form</h3>
    61. 

  61. 				{% include "ui/modal.html" class="position-relative rounded d-block show bg-secondary py-6 w-auto h-auto" modal-id="team" %}
    62. 

  62. 			</div>
    63. 

  63. 		</div>
    64. 

  64. 	</div>
    65. 

  65. </div>
    66. 

  66. 	</div>
    67. 

  67. </div>
    68.