SpiderBasic

Posted: **Thu Dec 25, 2025 7:20 pm**

Hello

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

Posted: **Mon Dec 29, 2025 8:14 am**

maddinvonfritz wrote: Thu Dec 25, 2025 7:20 pm 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.

Posted: **Mon Dec 29, 2025 12:12 pm**

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.

Posted: **Mon Dec 29, 2025 2:31 pm**

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.

Posted: **Wed Dec 31, 2025 6:06 pm**

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.

SpiderBasic

Mobile UI and <div class="list-item__subtitle

Mobile UI and <div class="list-item__subtitle

Re: Mobile UI and <div class="list-item__subtitle

Re: Mobile UI and <div class="list-item__subtitle

Re: Mobile UI and <div class="list-item__subtitle

Re: Mobile UI and <div class="list-item__subtitle