a1e721bfc3
This commit introduces a new `StatusAppNavBar` component that can be used to create a Status application's tab bar for dedicated tab sections such as chat, profile, wallet etc. The component is build in a way that it support declarative and imperative usage where necessary. In its most simple form, a `StatusAppNavBar` comes with a single tab button for the chat section. Such button has to be of type `StatusNavBarTabButton`: ```qml import StatusQ.Layout 0.1 StatusAppNavBar { navBarChatButton: StatusNavBarTabButton { icon.name: "chat" badge.value: 33 badge.visible: true tooltip.text: "Chat" } } ``` In addition, it's possible to specify a list of `StatusNavBarTabButton` for other sections of the application using the `navBarTabButtons` property: ```qml StatusAppNavBar { ... navBarTabButtons: [ StatusNavBarTabButton { icon.name: "wallet" tooltip.text: "Wallet" }, StatusNavBarTabButton { icon.name: "browser" tooltip.text: "Browser" }, StatusNavBarTabButton { icon.name: "status-update" tooltip.text: "Timeline" } ] } ``` Lastly, when desired to render tabs for Status community, which can grow in size, `StatusAppNavBar` exposes a list via the `navBarCommunityTabButtons` property that can have a `model` and a `delegate`. The `delegate` should also be a `StatusNavBarTabButton`: ```qml StatusAppNavBar { ... navBarCommunityTabButtons.model: someModel.communities navBarCommunityTabButtons.delegate: StatusNavBarTabButton { name: model.name tooltip.text: model.name anchors.horizontalCenter: parent.horizontalCenter } } ``` The amount of community tab buttons can grow as they need until their dedicated area becomes scrollable, at which point all `navBarTabButtons` will stick to the bottom of `StatusAppNavBar`. Closes #18 |
||
---|---|---|
.. | ||
sandbox | ||
src | ||
.gitignore | ||
README.md |
README.md
Status QML
An emerging reusable UI component library for Status applications.
Usage
StatusQ introduces a module namespace that semantically groups components so they can be easily imported. These modules are:
Provided components can be viewed and tested in the sandbox application that comes with this repository. Other than that, modules and components can be used as expected.
Example:
import Status.Core 0.1
import Status.Controls 0.1
StatusInput {
...
}
Viewing and testing components
To make viewing and testing components easy, we've added a sandbox application to this repository in which StatusQ components are being build. This is the first place where components see the light of the world and can be run in a proper application environment.
Using Qt Creator
The easiest way to run the sandbox application is to simply open the provided sandbox.pro
file using Qt Creator.
Using command line interface
To run the sandbox from within a command line interface, run the following commands:
$ git clone https://github.com/status-im/StatusQ
$ cd StatusQ/sandbox
$ qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
$ make
Once that is done, the sandbox can be started with the generated executable:
$ ./bin