Show More
Table of Contents
Examples
Basic Usage"More" / "Less" Button Text
Closed Height
JavaScript Reference
ConstructorRequirements
Attributes
Properties
Methods
Basic Usage
<k-show-more>
<p>Lorem ipsum dolor...</p>
</k-show-more>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?
"More" / "Less" Button Text
Change the text of the show "more" or "less" buttons by creating an element that has a slot
attribute of "more"
or "less"
.
<k-show-more>
<p>Lorem ipsum dolor...</p>
<span slot="more">Reveal Details</span>
<span slot="less">Hide Details</span>
</k-show-more>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?
Reveal Details Hide DetailsClosed Height
Change the height of the closed state by setting the --closed_height
CSS Custom Property.
<k-show-more
style="--closed_height: 4rem"
>
<p>Lorem ipsum dolor...</p>
</k-show-more>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?
JavaScript Reference
Constructor
Extends LazyComponent
new ShowMore()
Requirements
Attributes
opened: boolean
Whether the content is expanded.
Methods
more(): void
Expands the content.
less(): void
Collapses the content.
toggle(): void
Toggles the content between expanded and collapsed states.