DANA UI Template

Using DANA FIAT Design System

FIAT is the term DANA's design system, thus you will see the f- prefix in our naming.
We convince our merchants that using our components would make your development process easier and faster

Current Version

v1.0.0 (21/06/2022) (latest)

Getting Started

• To use our styled component you need to download the .zip file here
• Unzip the file on your device
• Open Mini Program Studio IDE
• Login to the IDE with your credentials
• Click Open Project and choose the unzipped dowloaded file

Usage

One

• Directly edit the imported project and start working there

Two

• Create a new blank Mini Program project
• Copy styles folder to your local project
• Add this line on the top of your app.acss file

...
@import "./styles/fonts.acss";
@import "./styles/fiat-commons.acss";
...

• To use FIAT component, for example f-btn, copy / merge the template from components to your components folder on your blank project
• Register the component to your page folder i.e pages/index/index.json

...
  "usingComponents": {
     "f-btn": "/components/fiat/f-btn/f-btn"
  },
  ...
}

• Use the styled component in your page

<view class="f-body m-16">  
  <f-btn>Button Primary</f-btn>
  <f-btn style="height: 10px" disabled>Button Primary disabled</f-btn>
</view>

Feature

• f-accordion
• f-accordion-item
• f-btn
• f-card
• f-card-actions
• f-card-content
• f-cell
• f-checkbox-groups
• f-collapse
• f-dialog
• f-divider
• f-icon
• f-input
• f-notif
• f-ovelay
• f-radio and f-radio-groups
• f-select
• f-sheet
• f-stepper
• f-switch
• f-tabs
• f-textarea
• f-toast

Future Pipeline

• Add package to npm
• Add UI documentation

Bugfixes

If you find any bug please directly raise to DANA Mini Program Team