Share My Creation [Web][SithasoIONIC7] News App UI

Hi Fam

Demo (open on Mobile Device)

This wireframe turned demo is inspired by Coding Technyks

I have reproduced it using SithasoIONIC7 Wireframe App, been an interesting leaving curve. I had to tweak some components with new functionality to support this design. Been worth it!

 

[Mashiane]

 

[Mashiane]

Things to note

1. Segments.

We have added scrollable segments just below out toolbar, setting most things for the background of the segment to be blank.

segment1.Initialize(Me, "segment1", "segment1")
    segment1.Background = "var(--ion-color-dark)"
    segment1.Scrollable = True
    segment1.ScrollBarHeight = "1px"
    segment1.ScrollBarWidth = "1px"
    segment1.ScrollbarThumbBackgroundColor = "var(--ion-color-dark)"
    segment1.ScrollbarThumbHoverBackgroundColor = "var(--ion-color-dark)"
    segment1.ScrollbarTrackBackgroundColor = "var(--ion-color-dark)"
    segment1.Value = "topnews"
    segment1.RawStyles = "margin-top:10px"
    segment1.AddToParent("homecontent", segment1.CustProps)

2. Segment Buttons

We have added 3 segment buttons to the segment and each has a class applied to it of segmentbutton

segmentbutton1.Initialize(Me, "segmentbutton1", "segmentbutton1")
    segmentbutton1.Value = "recentnews"
    segmentbutton1.Text = "Recent News"
    segmentbutton1.Layout = "label-only"
    segmentbutton1.RawClasses = "segmentbutton"
    segmentbutton1.AddToParent("segment1", segmentbutton1.CustProps)
    '
    segmentbutton2.Initialize(Me, "segmentbutton2", "segmentbutton2")
    segmentbutton2.Value = "topnews"
    segmentbutton2.Text = "Top News"
    segmentbutton2.Layout = "label-only"
    segmentbutton2.RawClasses = "segmentbutton"
    segmentbutton2.AddToParent("segment1", segmentbutton2.CustProps)
    '
    segmentbutton3.Initialize(Me, "segmentbutton3", "segmentbutton3")
    segmentbutton3.Value = "aroundnews"
    segmentbutton3.Text = "Around News"
    segmentbutton3.Layout = "label-only"
    segmentbutton3.RawClasses = "segmentbutton"
    segmentbutton3.AddToParent("segment1", segmentbutton3.CustProps)

3. CSS Rules

We then define a CSS rule that is for the segmentbutton class and add it. This class will then be applied to each of the buttons.

segment1style.Initialize(Me, "segment1style", "segment1style")
    segment1style.TargetId = ".segmentbutton"
    segment1style.RawStyles = "--background:var(--ion-color-dark);--color-checked:#fff;--color:var(--ion-color-medium);--indicator-box-shadow:var(--ion-color-dark);--indicator-color:var(--ion-color-dark);padding-left:3.5vh;padding-right:3.5vh"
    segment1style.AddToParent("homecontent", segment1style.CustProps)

4. News Cards

We create a template that each news card will be generated from..

app.AddMyLayout("card1", $"<ion-card id="card1" mode="ios" style="border-radius:0;height:20vh;margin:10px 16px"><ion-img id="img1" src="{imageUrl}" style="height:100%;width:100%;object-fit:cover"></ion-img><div id="imageoverlay" mode="ios" style="background-color:rgba(0, 0, 0, 0.3);height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%"></div><ion-card-content id="cardcontent1" mode="ios" style="bottom:5%;left:50%;padding-bottom:0;position:absolute;transform:translatex(-50%);width:100%;z-index:2"><ion-card-title id="cardtitle1" mode="ios" style="color:#fff;font-size:0.9rem">{title}</ion-card-title><p id="parag1" mode="ios"><ion-text id="authorname" mode="ios" style="color:lightgray;font-size:0.7rem;font-weight:bold">by {author} on {date}</ion-text></p></ion-card-content></ion-card>"$)

The content that will be replaced in the card is inside {}.

5. News Articles

We then define news articles.

Dim news As List
    news.Initialize
    '
    news.Add(CreateMap("imageUrl": "./assets/vr_ar.png", _
    "title": "Advancements in Virtual and Augmented Reality", _
    "date": "2024-02-05", _
    "author": "Michael Johnson"))
    '
    news.Add(CreateMap("imageUrl": "./assets/quantum.jpg", _
    "title": "New Breakthrough in Quantum Computing", _
    "date": "2024-01-27", _
    "author": "Alice Johnson"))
    
    news.Add(CreateMap("imageUrl": "./assets/spacex.jpg", _
    "title": "SpaceX's Recent Achievements in Space Technology", _
    "date": "2024-01-30", _
    "author": "Diana Williams"))
    
    news.Add(CreateMap("imageUrl": "./assets/ai.jpg", _
    "title": "Latest Innovations in Artificial Intelligence", _
    "date": "2024-01-28", _
    "author": "Bob Smith"))
    
    news.Add(CreateMap("imageUrl": "./assets/gadgets.jpg", _
    "title": "Upcoming Tech Gadgets and Trends", _
    "date": "2024-01-29", _
    "author": "Charlie Brown"))

6. Loading news articles.

We then loop through each article and then add a click event to each card.
This also ensures that the elements inside the cards receive a tag field, which is the article on that card.

For Each article As Map In news
        Dim articlePos As Int = app.LoadMyLayout("homecontent", "card1", article)
        Dim components As Map = app.GetMyViews("card1", articlePos, article)
        '
        Dim card1 As BANanoElement = components.Get("card1")
        card1.On("click", Me, $"card1_click"$)
    Next

7. Trapping card click event

When a card is clicked, we want to retrieve the article relevant to it. We read each tag field assigned to any element being clicked inside the card.

Sub card1_click(e As BANanoEvent)
    Dim article As Map = app.GetMyTag(e.ID)
    Log(article)
End Sub