Amazeui folding card layout, integrated content list, table component implementation

Time:2020-10-23

Foldable card layout may not be common in PC version websites, but in mobile version, web browsing on small screen will be brilliant.

Amazeui also provides a foldable card layout. Although there are examples on the official website, this kind of folding card layout still needs a lot of effort to integrate the content list and table components.

For example, as shown in the figure below, use the folding card layout of amazeui to integrate the content list and table components provided by it.

The code for the entire page is as follows:

<! -- develop with HTML5 -- >
<!doctype html>
<html class="no-js">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <! -- automatically adapt to mobile screen -- >
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <! -- give priority to WebKit kernel rendering -- >
        <meta name="renderer" content="webkit">
        <! -- don't be transcoded by Baidu -- >
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <! -- the following is the introduction of amazeui resources -- >
        <link rel="stylesheet" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <! -- when introducing JS, you must first introduce jQuery and then introduce amazeui, because this framework is developed based on jQuery -- >
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        < title > content list and table in foldable layout
    </head> 
    <body>
        <h1>Folding card layout</h1>
        <div data-am-widget="accordion" class="am-accordion am-accordion-gapped">
            <! -- here is the background color of the title, which is gray -- >
            <dl class="am-accordion-item am-active">
                < DT class = "am accordion title" > card 1-text
                <! -- this indicates that the panel is open by default -- >
                <dd class="am-accordion-bd am-collapse am-in">
                    <div class="am-accordion-content">
                    <! -- the content is written here -- >
                    It's just words
                    </div>
                </dd>
            </dl>
            <dl class="am-accordion-item">
                < DT class = "am accordion title" > card 2-content list
                <dd class="am-accordion-bd am-collapse">
                    <! -- if the file used in this folding layout is not purely a file, a margin must be added- bottom:-20px Cut the blank at the bottom -- >
                    <! -- if the content list is used, there is no need to add the class = "am concordion content" attribute -- >
                    <div style="margin-bottom:-20px">
                        <div class="am-list-news-bd">
                        <ul class="am-list">
                            <li class=" am-list-item-dated">
                                < a http: // Title 1</a>
                                <span class="am-list-date">2015-05-12</span>
                            </li>
                            <li class=" am-list-item-dated">
                                The title of "super long super long super long super long super long super long super long super long super long super long super long super long</a>
                                <span class="am-list-date">2015-05-12</span>
                            </li>
                            <li class=" am-list-item-dated">
                                < a http: // Title 3</a>
                                <span class="am-list-date">2015-05-12</span>
                            </li>   
                        </ul>
                        </div>
                    </div>
                </dd>
            </dl>
            <dl class="am-accordion-item">
                < DT class = "am accordion title" > card 3-form
                <dd class="am-accordion-bd am-collapse ">
                    <! -- am table bordered represents the line division between the columns of a table, and am table striped represents the gray and white color of the table -- >
                    <div class="am-accordion-content" style="margin-bottom:-20px">
                        <table class="am-table am-table-radius am-table-striped">
                            <thead>
                                <tr>
                                    <! -- like HTML, you must set the table width for each row -- >
                                    < th width = "33%" > header 1 < / th >
                                    < th width = "33%" > header 2 < / th >
                                    < th > header 3 < / th >
                                </tr>
                             </thead>
                             <tbody>
                                <tr>
                                    <td>Content 1</td>
                                    <td>Super long and super long content 2</td>
                                    <td>Content 3</td>
                                </tr>
                                <tr>
                                    <td>Content 1</td>
                                    <td>Super long, super long, super long, super long, super long, super long, super long, super long, super long, super long, super long, super long, super long and super long content 2</td>
                                    <td>Content 3</td>
                                </tr>
                                <tr>
                                    <td>Content 1</td>
                                    <td>Super long and super long content 2</td>
                                    <td>Content 3</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </dd>
            </dl>
        </div>
    </body>
</html>

The key point is that the comments are annotated. It also provides a way to handle super long content.

DL DT DD is the list layout of the original ecology in HTML. It has the same status as the UL Li group, but it is rarely used and may be forgotten.

If you want to integrate components in amazeui’s foldable card layout, you must remove the 20px white space at the bottom, otherwise it will be very ugly. The original meaning of the framework doesn’t want you to integrate things.

At the same time, the table should pay attention to setting the width of the first row to specify the lines.

This article about amazeui foldable card layout, integrated content list, table component implementation will be introduced here. For more related content of amazeui folding card layout, please search the previous articles of developpaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!