Welcome to TiKit UI Components
TiKit is a collection of UI components for Titanium built on top of Alloy and PurgeTSS.
Installation
To install it, run the following command in the terminal:
> [sudo] npm install -g tikit
Make sure you have PurgeTSS as well:
> [sudo] npm install -g purgetss
Installing the components
Once everything is installed on your machine, create a new Alloy project using PurgeTSS, make sure you have app.idprefix
and app.idprefix
settings configured.
> purgetss create myApp
Then, run tikit install
and follow an interactive select prompt:
> tikit install
? Choose a component to install › - Use arrow-keys. Return to submit.
❯ all components
alerts
avatars
buttons
cards
Available components and their variants
Alerts
General properties: variant, color and classes
An alert displays a short and important message attracting the user’s attention without interrupting the user’s task.
TiKit Alert Component contains 3 variants:
- callout
- pop
- solid
With 6 main colors each: success, danger, warning, info, dark and light.
And 2 custom colors for each variant called: primary and secondary.
You can add your own color values using the shades
command in PurgeTSS:
> purgetss shades '#hexcode1' primary
> purgetss shades '#hexcode2' secondary
Additional properties: delay, duration and dismissible
Use delay
to display the alert after a period of time and duration
to set the speed of the animation. Both properties are in milliseconds.
Set the dismissible
property to true to close it when the user clicks/taps on it.
<Alert module="tikit.ui" variant="pop" color="info" delay="500" dismissible="true" title="Dismissible Alert" text="Lorem ipsum dolor sit..." />
callout
Properties: title and text
A simple Alert with a title and brief description.
<Alert module="tikit.ui" variant="callout" color="success" title="Callout variant" text="Lorem ipsum dolor sit..." />
pop
Properties: title, text and icon
Alerts with a predefined icon to emphasize a message.
You can use icon fonts such as FontAwesome, Material Icons or any other icon font of your choice.
Change the icon using the icon
property and its size with any of PurgeTSS’s font size classes:
<Alert module="tikit.ui" variant="pop" color="primary" title="Primary Alert with custom Icon" text="Lorem ipsum dolor sit..." icon="mi mi-pending_actions text-3xl" />
solid
Properties: title and icon
A full-width, solid banner with a title and a predefined icon.
Just like the pop
variant, you can change its icon using the icon
property and its size with any of PurgeTSS’s font size classes.
<Alert module="tikit.ui" variant="solid" color="primary" title="Primary Alert with custom Icon" icon="mi mi-pending_actions text-2xl" />
Avatars
General properties: variant, size and classes
Use Avatars to portray people or objects. It can be used as a visual identifier for a user profile on your app.
TiKit Avatar Component contains 6 variants:
- chip
- circular
- square
- portrait
- landscape
- stacked
With 6 different sizes each: xs, sm, base, lg, xl and 2xl.
<Avatar module="tikit.ui" variant="chip" size="base" name="John Doe" image="link-to-image.jpg" />
chip
Properties: name and image
Set the name of the person and an image to display, using a local filesystem path, a remote URL, or a Blob object containing image data.
The default colors are bg-gray-200
and text-gray-500
. To change them use the classes
property, like the example below.
<Avatar module="tikit.ui" variant="chip" size="base" name="Mr. John Doe" image="https://randomuser.me/api/portraits/men/86.jpg" classes="bg-violet-900 text-violet-50" />
circular
Properties: name, image and border
Set border
to true to show a white border around the image.
Use the classes
prop to change the border color.
<Avatar module="tikit.ui" variant="circular" size="base" border="true" image="https://randomuser.me/api/portraits/men/86.jpg" />
square
Properties: name, image and border
Set border
to true to show a white border around the image.
Use the classes
prop to change the border color.
<Avatar module="tikit.ui" variant="square" size="base" border="true" classes="border-violet-900" image="https://randomuser.me/api/portraits/men/86.jpg" />
portrait
Properties: name and image
Use the classes
prop to change the border color.
The default border color is border-gray-500
, use the classes
prop to change it.
<Avatar module="tikit.ui" variant="portrait" size="base" classes="border-violet-900" image="https://randomuser.me/api/portraits/men/86.jpg" />
landscape
Properties: name and image
Use the classes
prop to change the border color.
The default border color is border-gray-500
, use the classes
prop to change it.
<Avatar module="tikit.ui" variant="landscape" size="base" classes="border-violet-900" image="https://randomuser.me/api/portraits/men/86.jpg" />
stacked
Properties: title, icon and last
To properly adjust the right margin of the last avatar in a stack, set its last
property to true.
<View class="horizontal">
<Avatar module="tikit.ui" variant="stacked" size="base" image="https://randomuser.me/api/portraits/men/86.jpg" />
<Avatar module="tikit.ui" variant="stacked" size="base" image="https://randomuser.me/api/portraits/men/87.jpg" />
<Avatar module="tikit.ui" variant="stacked" size="base" image="https://randomuser.me/api/portraits/men/62.jpg" />
<Avatar module="tikit.ui" variant="stacked" size="base" last="true" image="https://randomuser.me/api/portraits/men/88.jpg" />
</View>
Buttons
General properties: variant, size and classes
Buttons allow the user to take actions or make choices.
TiKit Button Component contains 6 variants:
- border
- border-rounded
- filled
- filled-rounded
- icon-left
- icon-right
With 6 different sizes each: xs, sm, base, lg, xl and 2xl.
<Button module="tikit.ui" variant="border" size="lg" title="Button Name" />
border
Property: title
Use the classes
property to change the color of the title and border:
<Button module="tikit.ui" variant="border" size="base" title="Border" classes="border-violet-900 text-violet-900" />
border-rounded
Property: title
Use the classes
property to change the color of the title and border:
<Button module="tikit.ui" variant="border-rounded" size="base" title="Border Rounded" classes="border-violet-900 text-violet-900" />
filled
Property: title
Use the classes
property to change the color of the title and background:
<Button module="tikit.ui" variant="filled" size="base" title="Filled" classes="text-violet-50 bg-violet-900" />
filled-rounded
Property: title
Use the classes
property to change the color of the title and background:
<Button module="tikit.ui" variant="filled-rounded" size="base" title="Filled Rounded" classes="text-violet-50 bg-violet-900" />
icon-left
Properties: title and icon
Use the icon
property to change its icon, color and size.
Use the classes
property to change the color of the title and background:
<Button module="tikit.ui" variant="icon-left" size="base" title="Button" icon="fa fa-file text-violet-50" classes="text-violet-50 bg-violet-900" />
icon-right
Properties: title and icon
Use the icon
property to change its icon, color and size.
Use the classes
property to change the color of the title and background:
<Button module="tikit.ui" variant="icon-right" size="base" title="Button" icon="fa fa-file text-violet-50" classes="text-violet-50 bg-violet-900" />
Custom Icons
Use any Icon Font Library
You can change to a different icon from the FontAwesome Icon Library or even to a different font vendor by setting the icon
property with the font and icon classes, ej. fa fa-file-pdf
or mi mi-pending_actions
You can even change its size with any of PurgeTSS’s font size classes, such as text-lg
or text-2xl
.
In this example, we are using the Material Icons font library.
<Button module="tikit.ui" variant="icon-left" size="base" icon="mi mi-pending_actions text-2xl text-violet-50" title="Pending Actions" classes="my-4 font-bold bg-violet-900" />
Cards
General properties: variant, color and classes
Cards are used to group and display content in a way that is easily readable, it serves as an entry point to more detailed information.
TiKit Card Component contains 4 variants:
- code
- content
- quote
- showcase
With 4 colors each: black, dark, light and white.
<Card module="tikit.ui" variant="code" color="black" copy="true" title="Card Title" text="Some code or text to display!" />
code
Properties: title, text and copy
To display small snippets of code.
Use the copy
property to display a copy button at the top-right corner.
The button’s title and the alert message are set with Titanium’s localization function: L('copy', 'Copy')
and L('code_copied', 'Code copied to clipboard!')
respectibly, so add both strings: copy
and code_copied
to your app’s target languages (app/i18n/xx/strings.xml
) for personalization and translation.
Install a monotype family of your preference and create a font-mono
style in ./purgetss/config.js
.
We are using FiraCode-Light
font family in all examples.
showcase
Properties: title, text and image
When you need to display an image with a title and a small description.
<Card module="tikit.ui" variant="showcase" color="black" title="Pocket" text="Mobile app marketing website" image="images/showcase/1.png" />
quote
Properties: name and text
When you need to display a quote from someone.
<Card module="tikit.ui" variant="quote" color="black" name="John Doe" text="Quas ullam, quis eius a blanditiis..." />
content
Properties: title, subtitle and text
Display a block of text with a large title, a highlighted subtitle and paragraphs of text.
<Card module="tikit.ui" variant="content" color="black" title="content variant, black" subtitle="This is a subtitle" text="Alloy.Globals.lorem" />
Tabs
The Tab component returns an instance of Titanium.UI.Tab that includes a custom icon created with an icon font such as FontAwesome, Material Icons or any other icon font of your choice.
By setting the title
, icon
and activeIcon
(iOS only) properties, you’ll get a Tab component with the icons nicely rendered.
The icon
property is defined with the icon font name and the icon code, for example: fa fa-home
or mi mi-home
.
<Tab module="tikit.ui" title="Email" icon="far fa-envelope" activeIcon="fas fa-envelope">
<!-- tab’s-window-content -->
</Tab>
Additional properties
These are regular Titanium.UI.Tab objects, so you can use all the properties and methods available for them.
For example you can set active tint and title color for each tab by using the activeTintColor
and activeTitleColor
properties like this:
<Tab module="tikit.ui" class="active-tint-violet-900 active-title-violet-900" title="Tabs" icon="mio mi-security_update_good text-3xl" activeIcon="mit mi-security_update_good text-3xl">
<Require src="sections/tabs" />
</Tab>
Official Icon Fonts in PurgeTSS
To copy the free versions of Font Awesome, Material Icons, Material Symbols or Framework7 Icons to your project, use the icon-library
command in PurgeTSS:
> purgetss icon-library --vendor=fa,mi,ms,f7
• fa, fontawesome = Font Awesome Icons
• mi, materialicons = Material Icons
• ms, materialsymbol = Material Symbols
• f7, framework7 = Framework7 Icons