Home›Docs›List›CSS Comment

CSS Comment

Last updated: 14 days ago

Category: List

The comment list is purely CSS-defined and can be integrated into any component or module, with full responsive support across all devices.

CSS Comment14 days agoEllipsis Text16 days agoText18 days agoArticle18 days ago

Introduction

Due to the complexity of comment sections, they aren't suitable for modular encapsulation. This framework provides CSS-defined comment list layouts with full responsive support across all devices.

Basic nested structure:

                
                     <div class="_comment">
                        <div class="_comment-head"></div>
                        <div class="_comment-body">
                            <!--Main comment-->
                            <div class="_comment-item">
                                <div class="_comment-wrap">
                                    <div class="_comment-left"></div>
                                    <div class="_comment-right">
                                        <!--Reply comment-->
                                        <div class="_comment-item"></div>
                                        <div class="_comment-item"></div>
                                        <div class="_comment-item"></div>
                                        <div class="_comment-more"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="_comment-item"></div>
                        </div>
                        <div class="_comment-foot"></div>
                    </div>

Single Comment Example

Create a single comment to observe the node elements used.

Output
HTML

Emily Johnson

1F

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12
```
                
                
            
```

Nested Comments

_comment-item represents a main comment. To show replies, place new _comment-item tags at the end of _comment-item > _comment-right.

This example uses JavaScript to simulate nested comments.

Output
HTML
JS

```
                
                
            
```

                
                let item = orca.createEl('div',{class:'_comment-item'},`
                            <div class="_comment-wrap">
                                <div class="_comment-left">
                                    <a href="###" rep="disk"><img src="https://unpkg.com/orcares/image/avatar01.jpg" /></a>
                                </div>
                                <div class="_comment-right">
                                    <div class="_comment-author">
                                        <div class="_comment-left"><a href="###" rep="name">Emily Johnson</a></div>
                                        <div class="_comment-right"><span>1F</span></div>
                                    </div>
                                    <div class="_comment-cont">
                                        The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.
                                    </div>
                                    <div class="_comment-byline">
                                        <div class="_comment-left"><span>10 hours ago</span><span>Fujiyoshida, Japan</span></div>
                                        <div class="_comment-right"><span><i class="_icon-heart"></i> 12</span></div>
                                    </div>
                                </div>
                            </div>
                `);
                let fragment = document.createDocumentFragment();
                let demo0001 = document.querySelector('#demo0001');
                let str = '';
                for(let i=0;i<3;i++){
                    let copy = item.cloneNode(true),
                        right = copy.querySelector('._comment-right');
                    for(let j=0;j<2;j++){
                        right.appendChild(item.cloneNode(true));
                    }
                    fragment.appendChild(copy);
                }
                demo0001.appendChild(fragment);

Avatar Types

Avatars can be implemented in several ways:

Using ax-avatar component with src attribute (supports all component properties)
Using rep=disk node with img tag (circular avatar)
Using rep=cube node with img tag (square avatar)
Using rep=image node with img tag (width-fixed, height-flexible)
Using rep=disk/rep=cube nodes with background-image style

Note: var(--_avatar) is the framework's default avatar available via background-image.

Output
HTML

Emily Johnson

1F

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12

Emily Johnson

1F

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12

Emily Johnson

1F

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12

Emily Johnson

1F

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12
```
                
                
            
```

Avatars can be empty. Main comments will indent left without avatars, while replies maintain position to distinguish hierarchy.

Output
HTML

Emily Johnson

1F

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12

Emily Johnson

1F

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12

Emily Johnson

1F

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12

Emily Johnson

1F

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12
```
                
                
            
```

Decorative Elements

Various small elements can decorate comment content.

Output
HTML

Emily Johnson

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, JapanReply

12

Emily Johnson

Report

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12 8

Emily Johnson

1F

ReplyMichael Chen：The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, Japan

12
```
                
                
            
```

Multimedia Content

The _comment-cont node holds comment content, supporting:

Text
Emoticons
img, video, audio
picture, svg
iframe
And other multimedia tags

Output
HTML

Emily Johnson

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.(╯°□°）╯︵ ┻━┻

10 hours agoFujiyoshida, JapanReply

12

Emily Johnson

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, JapanReply

12

Emily Johnson

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, JapanReply

12

Emily Johnson

The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.

10 hours agoFujiyoshida, JapanReply

12
```
                
                
            
```

Using Dividers

Method 1: dividable Attribute

Add dividable to _comment for main comment dividers (replies won't have dividers).

Output
HTML
JS

```
                
                
            
```

                
                let item = orca.createEl('div',{class:'_comment-item'},`
                            <div class="_comment-wrap">
                                <div class="_comment-left">
                                    <a href="###" rep="disk"><img src="https://unpkg.com/orcares/image/avatar01.jpg" /></a>
                                </div>
                                <div class="_comment-right">
                                    <div class="_comment-author">
                                        <div class="_comment-left"><a href="###" rep="name">Emily Johnson</a></div>
                                        <div class="_comment-right"><span>1F</span></div>
                                    </div>
                                    <div class="_comment-cont">
                                        The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.
                                    </div>
                                    <div class="_comment-byline">
                                        <div class="_comment-left"><span>10 hours ago</span><span>Fujiyoshida, Japan</span></div>
                                        <div class="_comment-right"><span><i class="_icon-heart"></i> 12</span></div>
                                    </div>
                                </div>
                            </div>
                `);
                let fragment = document.createDocumentFragment();
                let demo0001 = document.querySelector('#demo0002');
                let str = '';
                for(let i=0;i<3;i++){
                    let copy = item.cloneNode(true),
                        right = copy.querySelector('._comment-right');
                    for(let j=0;j<2;j++){
                        right.appendChild(item.cloneNode(true));
                    }
                    fragment.appendChild(copy);
                }
                demo0001.appendChild(fragment);

Method 2: _comment-br Tag

Add _comment-br before/after _comment-item for custom dividers.

Output
HTML
JS

```
                
                
            
```

                
                let item = orca.createEl('div',{class:'_comment-item'},`
                            <div class="_comment-br"></div>
                            <div class="_comment-wrap">
                                <div class="_comment-left">
                                    <a href="###" rep="disk"><img src="https://unpkg.com/orcares/image/avatar01.jpg" /></a>
                                </div>
                                <div class="_comment-right">
                                    <div class="_comment-author">
                                        <div class="_comment-left"><a href="###" rep="name">Emily Johnson</a></div>
                                        <div class="_comment-right"><span>1F</span></div>
                                    </div>
                                    <div class="_comment-cont">
                                        The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.
                                    </div>
                                    <div class="_comment-byline">
                                        <div class="_comment-left"><span>10 hours ago</span><span>Fujiyoshida, Japan</span></div>
                                        <div class="_comment-right"><span><i class="_icon-heart"></i> 12</span></div>
                                    </div>
                                </div>
                            </div>
                `);
                let fragment = document.createDocumentFragment();
                let demo0001 = document.querySelector('#demo0003');
                let str = '';
                for(let i=0;i<3;i++){
                    let copy = item.cloneNode(true),
                        right = copy.querySelector('._comment-right');
                    for(let j=0;j<2;j++){
                        right.appendChild(item.cloneNode(true));
                    }
                    fragment.appendChild(copy);
                }
                demo0001.appendChild(fragment);

View More Button

When comments are collapsed, use _comment-more for "View More" buttons. Place at the bottom of _comment-item>_comment-right.

Output
HTML
JS

```
                
                
            
```

                
                let item = orca.createEl('div',{class:'_comment-item'},`
                            <div class="_comment-wrap">
                                <div class="_comment-left">
                                    <a href="###" rep="disk"><img src="https://unpkg.com/orcares/image/avatar01.jpg" /></a>
                                </div>
                                <div class="_comment-right">
                                    <div class="_comment-author">
                                        <div class="_comment-left"><a href="###" rep="name">Emily Johnson</a></div>
                                        <div class="_comment-right"><span>1F</span></div>
                                    </div>
                                    <div class="_comment-cont">
                                        The sunrise at Mount Fuji was absolutely breathtaking. The way the first light touched the snow-capped peak was magical.
                                    </div>
                                    <div class="_comment-byline">
                                        <div class="_comment-left"><span>10 hours ago</span><span>Fujiyoshida, Japan</span></div>
                                        <div class="_comment-right"><span><i class="_icon-heart"></i> 12</span></div>
                                    </div>
                                </div>
                            </div>
                `);
                let more = orca.createEl('div',{class:'_comment-more'},`<a href="##">See More</a>`);
                let fragment = document.createDocumentFragment();
                let demo0001 = document.querySelector('#demo0004');
                let str = '';
                for(let i=0;i<3;i++){
                    let copy = item.cloneNode(true),
                        right = copy.querySelector('._comment-right');
                    for(let j=0;j<2;j++){
                        right.appendChild(item.cloneNode(true));
                    }
                    right.appendChild(more.cloneNode(true));
                    fragment.appendChild(copy);
                }
                demo0001.appendChild(fragment);