Mobile UI and <div class="list-item__subtitle

[maddinvonfritz]

Hello

Multiple objects of Onsen UI allow subtitles. Is it possible to create them with SpiderBasic?

[bembulak]

Hello

Multiple objects of Onsen UI allow subtitles. Is it possible to create them with SpiderBasic?

It would be helpful if you could provide a link / image / drawing of what you exactly mean and what you're trying to achieve.
Is there any test/demo-code you can provide? Remember: the more information and context you can provide, the more likely it is that we can (and want) to help.

TL;DR: I'm quite sure, it is possible.

[maddinvonfritz]

Hello thanks for the answer. Here is the sample code from the Onsen website.
Under the title "Cutest kitty" there is a subtitle "On the Internet".

https://onsen.io/v2/api/js/ons-list.html

Code: Select all

    <ons-list-header>Thumbnails and titles</ons-list-header>
    <ons-list-item>
      <div class="left">
        <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40">
      </div>
      <div class="center">
        <span class="list-item__title">Cutest kitty</span><span class="list-item__subtitle">On the Internet</span>
      </div>
    </ons-list-item>

Unfortunately, I still have very little idea about HTML5 and JS at the moment. I'm sure I'm just missing something.

[bembulak]

I see.
I'm sure it's possible to reproduce this better, but here's a first approach:

Code: Select all

Enumeration
  #Container
  #List
EndEnumeration

; Create an image
CreateImage(0, 42, 32, 24, RGB(255, 0, 0))
If StartDrawing(ImageOutput(0))
  Box(0, 0, 42, 42, RGB(255, 128, 128))
  StopDrawing()
EndIf

If ContainerMobile(#PB_Any, #PB_Mobile_Page, "margin:8px")
    
    ListMobile(#List)
    
    If AddListMobileItem(#List, "Expand: The cutest kitty", #PB_Mobile_Expandable)
      If ContainerMobile(#PB_Any, #PB_Mobile_Row, "padding: 8px;", "")
        ImageMobile(#PB_Any, ImageID(0), #PB_Mobile_Left)
        text$ = "<span class='list-item__subtitle'>On the Internet</span>"
        HtmlMobile(text$)
        CloseMobileContainer()
      EndIf
      CloseMobileContainer()
    EndIf
    
    CloseMobileContainer()
  EndIf

This works without much inline HTML / JS / CSS. Take a look at SBs ListMobile() and AddListMobileItem()/ContainerMobile() commands. I think they're very capable.

[Ken]

Here is an other option using Icon.

Code: Select all

Enumeration
  #List
  #ImageItem
EndEnumeration

; Create a page
If ContainerMobile(#PB_Any, #PB_Mobile_Page, "margin:12px")
  
  ; Create a list
  ListMobile(#List)
  
  ; Create a custom container within the list
  If AddListMobileItem(#List, "", #PB_Mobile_Container)
    
    ; Left: Icon
    IconMobile(#PB_Any, "ion-logo-octocat", #PB_Mobile_Left)
    
    ; Center: We'll create a custom layout
    ; First, let's use a ContainerMobile with a Row to get 3 slots
    ContainerMobile(#PB_Any, #PB_Mobile_Row, "align-items: center;")
      
      TextMobile(#PB_Any, "Cutest kitty")
      TextMobile(#PB_Any, "On the Internet")
    
      CloseMobileContainer() ; Close the list item container
  EndIf
 
  CloseMobileContainer() ; Close the page

EndIf

This would be nice option if TextMobile would work like you would expect. But unfortunately it does not honor style attribute using SetMobileAttribute.