Use with Taro

Taro is a React-like framework，Using Fower in Taro is very similar to using it in React.

Installation

npm

npm install @fower/taro

yarn

yarn add @fower/taro

pnpm

pnpm add @fower/taro

Usage

Now we're going to build a user profile card ui with View,Image,Text.

import { View, Text, Image } from '@fower/taro'

Result

Loading...

Live Editor

<View toCenterY p-10 w-260 bgWhite rounded-10 shadow> <Image circle-48 src="/img/jobs.jpg" /> <View ml-10> <View textXL fontBold> Steve Jobs </View> <Text gray800>Co-founder of Apple Inc.</Text> </View> </View>

<View toCenterY p-10 w-260 bgWhite rounded-10 shadow>
  <Image circle-48 src="/img/jobs.jpg" />
  <View ml-10>
    <View textXL fontBold>
      Steve Jobs
    </View>
    <Text gray800>Co-founder of Apple Inc.</Text>
  </View>
</View>

As you can see, we can build a more complex interface with few code. At first glance, you might say: "Isn't this a disguised inline style?" This is indeed similar to the inline style. They both write the style on JSX, but maybe this is the only similarity of them. The way to writing styles of Fower, I call it "Atomic props".

Compared with inline style, "Atomic props" has many advantages:

• Less Code, inline styles has a larger amount of code, which can easily make JSX messy, but "Atomic props" retains the simplicity of JSX and is more readable.

• Style reuse, using inline styles, it is easy to quickly expand the code, using "Atomic props", the code size will not expand too much as the project grows.

@fower/taro

The source code of @fower/taro is very simple:

@fower/taro Source code

import { styled } from '@fower/styled'
import Taro from '@tarojs/components'

export const View = styled(Taro.View)
export const MovableView = styled(Taro.MovableView)
export const ScrollView = styled(Taro.ScrollView)
export const Swiper = styled(Taro.Swiper)
export const SwiperItem = styled(Taro.SwiperItem)
export const Block = styled(Taro.Block)
export const MovableArea = styled(Taro.MovableArea)
export const CoverView = styled(Taro.CoverView)
export const CoverImage = styled(Taro.CoverImage)
export const Icon = styled(Taro.Icon)
export const Text = styled(Taro.Text)
export const RichText = styled(Taro.RichText)
export const Progress = styled(Taro.Progress)
export const Button = styled(Taro.Button)
export const Checkbox = styled(Taro.Checkbox)
export const CheckboxGroup = styled(Taro.CheckboxGroup)
export const Editor = styled(Taro.Editor)
export const Form = styled(Taro.Form)
export const Input = styled(Taro.Input)
export const Label = styled(Taro.Label)
export const Picker = styled(Taro.Picker)
export const PickerView = styled(Taro.PickerView)
export const PickerViewColumn = styled(Taro.PickerViewColumn)
export const Radio = styled(Taro.Radio)
export const RadioGroup = styled(Taro.RadioGroup)
export const Slider = styled(Taro.Slider)
export const Switch = styled(Taro.Switch)
export const Textarea = styled(Taro.Textarea)
export const Image = styled(Taro.Image)
export const Navigator = styled(Taro.Navigator)
export const Camera = styled(Taro.Camera)
export const Canvas = styled(Taro.Canvas)
export const OpenData = styled(Taro.OpenData)
export const Ad = styled(Taro.Ad)
export const Video = styled(Taro.Video)
export const Audio = styled(Taro.Audio)
export const FunctionalPageNavigator = styled(Taro.FunctionalPageNavigator)
export const LivePlayer = styled(Taro.LivePlayer)
export const LivePusher = styled(Taro.LivePusher)
export const Map = styled(Taro.Map)
export const WebView = styled(Taro.WebView)
export const OfficialAccount = styled(Taro.OfficialAccount)
export const NavigationBar = styled(Taro.NavigationBar)
export const PageMeta = styled(Taro.PageMeta)