Something about grids

Web Export
1

hi there,i have 3 questions of grids:
1 why when i set tag name to ul label and sub tag name to li label, the tag “ul” style will be like this

ul {
    ...
    list-style-type: disc;
    ...
}

2 how set li label of grids without Absolute positioning

3 There are a few drop-down options, such as group layout and group items, which cannot be clicked.

Looking forward to your answer，thank you very much

2

Hi Lllllu,

  1. Do you want to define the style list-style-type: disc;? The list-style-type is not set by default. Select the repeat grid and in the additional style property enter, list-style-type: disc;. See example
  2. Select the item and in the styles and sub styles fields add -all; See example
  3. Group layout has to be selected using the icon on the right of the label. The fields on some options will not be enabled until you select a layout that is not default.
    image
    image768×124 5.74 KB

Check these examples for List Example List-Example.xd (180.9 KB)
And this example for Group Layout row-layout.xd (489.8 KB)

3

hi velara:
thanks for your example,but i still have some question:

if i want export somethings like this and its a automation software, so i was think

%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20191101105320

  • how to export tag li without id
  • when export it, how to set background color of tag name by css with auto width
  • how to set tag li style with flex

After some attempts,oh i see,the web export just give us basic layout with code,when i want something custom style, i need set custom class name and define them, Is what I said right?

here is about how i defined

.hot_tag_li {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}

.hot_tag_li li {
    list-style: none;
}

.hot_tag_li li a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    width: 87px;
    float: left;
    line-height: 32px;
    background: #F3F4F5;
    border-radius: 5px;
    text-align: center;
}
  • so,when people use the export web,they need know basic div-css language ？
  • Li tags are generally used in repeated places. Back end programmers need their styles to be exactly the same. Why is the default way of exporting absolute positioning? Can you set the default way to auto arrange

Thank you for reading so much. I look forward to your reply

4

That’s not really possible yet. There is always markupinside to the rescue but not a simple way to say, “do not put id on a repeat grid item”. It’s on the list for features. In fact, if you enter, “none” for id on another element it will not have an id.

There are a couple of ways to do backgrounds. Create a group and then in the group put a rectangle. Select the rectangle and select “Use as background”.

To set auto width, enter in the additional styles, “-width”. That will remove width value and it will auto size.

You can also set background color by entering in the additional styles, “background-color: red”.

For creating a flex group you can use Group layout options (see example). For a list item in a repeat grid you will have to add it as a style manually through additional sub styles or as you have done by adding a class. Define the class as you have done and then add the class name in the sub styles property.

Yes. It will do the basics and you can add or subtract as much as you want.

If you want to be a power user then yes. The more you know the more powerful things you can accomplish.

This gives the closest representation to the design of the graphic designer in XD. There is flex group positioning that was added last month. (see example) Do you mean for list items? It is the default for now. It can be changed later.

For list items? Have you seen the example project (attached above)? You can remove all styles and all tags (except id) to achieve your goals. I’ve shown it in the examples.

Better support for list items is possible. It is a problem that is being discussed. Please reply with suggestions. How it will work if there were no limits.

5

When i opened the file you gave me before, it was always prompted that it was created with the updated version, but my Adobe creative cloud desktop didn’t prompt that I could upgrade the updated version, so I couldn’t open it all the time. Maybe because I was in China, the Chinese version would be updated more slowly.

Today I can upgrade the updated version. I’ll try it later.

In addition, I have emailed you. I think your software is very good. Do you want to launch a Chinese version? I can help you translate and promote your software.

6

Hi Lllllu,

Yes the file was created in an updated version. I’ve re-uploaded one called List Example that should work for version 23 and newer. List-Example.xd (180.9 KB)

I’ve also added 4 new videos in the last two days.

There are at the end in the playlist,

There is one specifically for Lists in Grids,

Thank you for the compliment! I would like a Chinese version! I think I have your email. Please check your email box for replies.

7

ok，thank you