This is a migrated thread and some comments may be shown as answers.

Custom Icons

0 Answers 166 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 04 Aug 2013, 07:16 PM
I've seen some of the documentation regarding how to create custom icons for Kendo UI Mobile, but can someone please give me an example of how it is applied to the MobileTapStrip in ASP.NET MVC?

Here's what I've tried so far:

<style>
    .km-root .km-pane .km-view .km-home1
    {
        background-image: url("/Images/Icons/home1.png");
    }
</style>

@(Html.Kendo().MobileLayout()
    .Name("mobile-main")
    .Footer(
        @<text>
            @(Html.Kendo().MobileTabStrip()
                .Items(items => {
                    items.Add().Icon("home1").Text("Home").Url("#view-home");
                    items.Add().Icon("cart").Text("Purchases").Url("#view-purchases");
                    items.Add().Icon("bookmarks").Text("Reports").Url("#view-reports");
                })

            )
        </text>
    )
)

OK, I've figured it out:

@(Html.Kendo().MobileLayout()
    .Name("mobile-main")
    .Footer(
        @<text>
            @(Html.Kendo().MobileTabStrip()
                .Items(items => {
                    items.Add().Icon("home1").Text("Home").Url("#view-home");
                    items.Add().Icon("purchases").Text("Purchases").Url("#view-purchases");
                    items.Add().Icon("reports").Text("Reports").Url("#view-reports");
                })

            )
        </text>
    )
)

CSS:

.km-root .km-pane .km-view .km-icon {
    background-size: 100% 100%;
    -webkit-background-clip: border-box;
    background-color: currentcolor;
}

.km-home1 {
    -webkit-mask-box-image: url("/Images/Icons/home1.png");
    background-color: red;
}

.km-purchases {
    -webkit-mask-box-image: url("/Images/Icons/money.png");
    background-color: red;
}

.km-reports {
    -webkit-mask-box-image: url("/Images/Icons/documents.png");
    background-color: red;
}

No answers yet. Maybe you can help?

Tags
TabStrip (Mobile)
Asked by
Steven
Top achievements
Rank 1
Share this question
or