From 740f6c636df1577a4a75cac6f4c6213fed96673c Mon Sep 17 00:00:00 2001 From: Roene Date: Mon, 30 Mar 2026 10:35:38 +0200 Subject: [PATCH 1/4] Read more / read less inline variant --- package.json | 1 + resources/css/app.css | 1 + resources/views/components-preview.blade.php | 15 +++++ .../components/readmore/inline.blade.php | 59 +++++++++++++++++++ .../components/readmore/readmore.blade.php | 2 +- 5 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 resources/views/components/readmore/inline.blade.php diff --git a/package.json b/package.json index f461345b..3cdc54ff 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.9", "@tailwindcss/vite": "^4.2.1", + "@tushargugnani/tailwind-group-peer-checked": "^1.0.0", "concurrently": "^9.2.1", "laravel-vite-plugin": "^2.0.0", "tailwindcss": "^4.2.1", diff --git a/resources/css/app.css b/resources/css/app.css index c68a6c78..b382eb0a 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -2,6 +2,7 @@ @plugin '@tailwindcss/forms'; @plugin '@tailwindcss/typography'; +@plugin '@tushargugnani/tailwind-group-peer-checked'; @source '../**/*.blade.php'; diff --git a/resources/views/components-preview.blade.php b/resources/views/components-preview.blade.php index a29f78a5..d33b976a 100644 --- a/resources/views/components-preview.blade.php +++ b/resources/views/components-preview.blade.php @@ -369,6 +369,21 @@ +
+
+

Inline

+
+ This component is a variant for the read more / read less component. This content has a default line-clamp-1, + the buttons will show inside the text instead of below the text. +
+
+
+

Inline

+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. + +
+

Prose component

diff --git a/resources/views/components/readmore/inline.blade.php b/resources/views/components/readmore/inline.blade.php new file mode 100644 index 00000000..f8811caa --- /dev/null +++ b/resources/views/components/readmore/inline.blade.php @@ -0,0 +1,59 @@ +{{-- +Read more/less component using the Tailwind CSS `peer` utility. + +## Notes +- **Clamping** The default of line-clamp-1 is used. It is recommended that you keep it line-clamp-1 +- **Buttons** You can't use +
+
+ + +
+
+

Default & Outline button

+
+ The default button is the default button. Nothing special, it is not recommended to use this button, + but if you would like to use the button, it is possible. The outline button doesn't have a background and only + contains a border. +
+
+
+
+
+
+
+ +
+
+

Conversion & Rounded button

+
+ The conversion button is used for anything conversion related, like adding to cart or inside a checkout. + The rounded button is a variant that you can use for slider navigation. +
+
+
+
+
+
+
+
+
+
+
+ +
+
+

Button link

+
+ Show a button as a simple link with an underline on hover. + The button has no background or padding. +
+
+
+
+
+
+
+ +

Input components

+
+
+

Text Fields

+
+ Text fields can be used with or without label. + When you add a required attribute, the label will be marked with an asterisk. +
+
+
+ + + + +
+
+ + + + +
+
+
+
+

Selectors

+
+ These fields can be used with or without label. + When you add a required attribute, the label will be marked with an asterisk. +
+
+
+ + + + +
+
+
+ + + + +
+
+ + + + +
+
+
+ +

Slideover Component

+
+
+

Default

+
+
+ + + +
+
+
+
+ + Example Slideover + + +
+
+
+
+
+

This is an example of the slideover component.

+

You can put any content here!

+
+
+
+
+
+ +
+

Right-positioned

+
+
+ + + +
+
+
+
+ + Right Slideover + + +
+
+
+
+
+

This slideover appears from the right side.

+

It demonstrates the position property.

+
+
+
+
+
+
+

Mobile only

+
+
+ + + +
+
+
+
+ + Mobile Slideover + + +
+
+
+
+
+

This is a mobile-specific slideover that transforms on desktop.

+

On mobile devices, it appears as a slideover.

+

On desktop screens (lg breakpoint and above), this content is directly embedded in the page instead of being in a slideover.

+
+
+
+
+
+
+ +

Accordion component

+
+
+

Default usage

+
+ We use the default behavior from the details/summary HTML elements. This means that the + component will have a chevron by default and it can have multiple open accordions at once. +
+
+
+
+ + Question 1 + + + +
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+ + Question 2 + + + +
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+
+
+ + Single open 1 + + + +
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+ + Single open 2 + + + +
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+
+
+
+

Accordion with custom icon

+
+ By default the component will have a chevron that rotates when the open state is true. + You can also use this component with a custom icon if you prefer that. +
+
+
+ + Question 1 + + + + + + +
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+ + Question 2 + + + + + + +
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+
+
+

Accordion without icon

+
+ By default the component will have an chevron that rotates when the open state is true. + You can also use this component without using an icon. +
+
+
+ + Question 1 + + + +
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+ + Question 2 + + + +
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+
+
+

Mobile only accordion

+
+ This is only an accordion on mobile devices. On desktop, it's always open. +
+
+
+ + +
+
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+ + +
+
+ Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. +
+
+
+ +

Read more component

+
+
+

Read more / Read less

+
+ This component is useful for long texts. It will automatically add a button if the text is too long. + Resize the window to see button show and hide. +
+
+
+

Long text

+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. +
+ +
+ +
+
+

Short text

+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. +
+ +
+ +
+
+
+
+

Inline

+
+ This component is a variant for the read more / read less component. This content has a default line-clamp-1, + the buttons will show inside the text instead of below the text. +
+
+
+

Inline

+
+ +
+

+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. + + +

+ +
+
+
+ +

Prose component

+
+

Wayne Enterprises

+

Wayne Foundation

+

Bat Bunker

+

Batcave

+

+ Wayne Enterprises, Inc., also known as WayneCorp and Wayne Industries, is a wealthy fictional company appearing in American comic books published by DC Comics, commonly in association with the superhero Batman. Wayne Enterprises is a large, growing multinational company. +

+
    +
  • Robert Pattinson
    • +
  • Ben Affleck
    • +
  • Christian Bale
    • +
+
    +
  1. Christian Bale
    2. +
  2. Ben Affleck
    3. +
  3. Robert Pattinson
    4. +
+
+ I am vengeance, I am the night, I am Batman. +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
MovieScoreYear
Batman Begins8.22005
The Dark Knight9.02008
The Dark Knight Rises8.42012
+
+ + + +