duxui is duxapp official development of a compatible multi-terminal UI component library, compatible with small programs, H5, React Native, the library provides 60 + components, covering most of the use of the scene!
It can help you through a unified component style, quickly complete the development of multi-application, including React Native app development
duxui has been used by me in many projects, including the development of dozens of projects including app, you can use this link to view or experience these apps./Some of these apps may not be able to be viewed properly because they are no longer in operation.
typical example
If you want to see how these components are displayed, check them out according to the different ends of the spectrum
-
applet
-
APP /
-
H5
If you want to see how these components work or the source code of the components through the project, use the following command to create a sample code of the UI library
npx duxapp-cli create projectName duxuiExample
includedprojectName is the name of the project to be created, after the creation of the root command line according to the prompt for the next operation
utilization
This is a module for duxapp, you need to use it in duxapp in order to use this module, for the documentation of the UI library check out the/docs/duxui/start
If you don't already have this module, you need to install the duxui module first, and if you don't already know what theduxapp frameworkPlease check firstthis articlerealize
yarn duxapp app add duxui
After installation, you can use it by importing it in your module, like this
import { Column, Header, Image, px, Row, ScrollView, Tab, Text, TopView } from '@/duxui'
import { GridIcon } from '@/gridOperator'
export default function LedgerDetail() {
return <TopView>
<Header title='Business Ledger Detail' />;
<ScrollView>; <Row className
<Row className='mt-3 mh-3 bg-white r-1 p-3 gap-3 items-start' >
<Image style={{ width: px(80) }} square />
<Column grow className='mt-1 gap-1'> <Column grow className='mt-1 gap-1'>
<Text numberOfLines={1}> Ordos JiuGong Construction Co</Text>
<Text className='mt-1' size={18} color={2}> Contact Person: Little Dale | Tel: 010-4521-8652</Text>
<Text size={18} color={2}> Grid Area: <Text type='primary'> Light Textile Industrial Park</Text> Historical Problems: <Text type='danger'> 12 </Text>& lt;/Text>
</Column>
<GridIcon className='self-center text-primary' size={56} name='biaoqianlanbodianhua' />
</Row>
<Column className='mt-3'/> </Row>.
<Tab>.
{
(item => < key={} title={} paneKey={} />)
}
</Tab>
</Column>
<Column className='mt-3 mh-3 bg-white r-1 p-3' >
<Text size={1} style={{ lineHeight: px(42) }}> Company is a form of enterprise organization formed to meet the needs of socialized mass production in market economy. A company in China refers to a legal person, including a limited liability company and a joint-stock company, which is an association established within the territory of China in accordance with the Company Law of the People's * for the purpose of making profits. Refers to the organizational form of an enterprise. A profit-oriented association legal person. It is highly developed in capitalist society. China has carried out socialist transformation of private companies after the founding of the country. State-run industrial, commercial, construction, transportation and other sectors of the implementation of independent economic accounting management organizations and certain cities in the professional management agencies by industry, also commonly known as companies. With the reform of China's economic system, various companies enjoying legal personality have been set up to engage in their own production and business activities according to the statute. Refers to the form of organization of enterprises. An association of legal persons for the purpose of making profit. It has been highly developed in the capitalist society. After the founding of the People's *, socialist transformation of private companies was carried out. State-run industrial, commercial, construction, transportation and other sectors in the implementation of independent economic accounting management organizations and some cities in the professional management agencies by industry, also commonly known as companies. With the reform of China's economic system, enjoy legal personality of various companies have been established, according to the constitution to engage in their own production and management activities. Folding </Text>.
</Column>.
</ScrollView>.
</TopView>.
}
const tabs = [
{ name: 'Basic Information', value: 0 }, { name: 'Report Work Order', value: 1 }, }
{ name: 'History Issues', value: 2 }
]
component library
Let me describe the components and their functions.
TopView Top level container
TopView is used as the root component of the page, in duxapp, every page needs to exist this component, he is used to realize the duxapp several functions
Header Header navigation
duxapp default will be set to customize the header, each page face is recommended to use a header component as the title of the display, and the Header component will control the status bar color display, H5 page title display
ScrollView Scrolling container
This is a package for Taro ScrollView, which realizes the drop-down refresh function of multiple ends, ScrollView only supports vertical scrolling, you need to scroll horizontally to use it.
PullView
Content can be popped up in 4 directions, up, down, left and right
Loading Loading animation
Used to show loading animation, similar to ios like daisies
Absolute Positioning
Child elements placed inside this component are rendered at the outermost level, which is achieved using the method
List Paging List
When your list interface uses page for paging, you can quickly implement a list page with this component, which has the following characteristics
- drop-down refresh
- automatic pagination
- Empty Component Display
- Customize the bottom of the header rendering
- RN implementation using @shopify/flash-list for better performance
- Multi-column support
Layout Layout calculation
Used to calculate the position and size information of the component where the Layout is located.
ActionSheet popup menu
Wrapping pop-up menu functionality
Button
Pushbutton Components
Cell
The cell component is used to display a vertical list of menus and has a shadow property by default.
LinearGradient Linear gradient
Because RN does not support writing gradients via css, this component was written to implement the gradient functionality
BoxShadow Shadow
Since the support for shadows on the Android side of RN is less than perfect, you can use this component to achieve shadow effects
Column flex vertical
This is the component for fast vertical layout
Row flex horizontal
This is the component for fast horizontal layout
Space
Used to control the spacing of child elements, realized through the gap, it is recommended to use the global style of the gap directly.
Divider
Dividing lines implemented using borders
Grid
Used to realize a layout like the 9-panel grid
Card
Card layout with components for outer margins, inner margins, rounded corners, shadows
Tab Tab
Tab switching, also available for form entry use
TabBar bottom navigation
Typically used for the bottom navigation on the app's home page, to use this component you need to create it with the create function
Elevator Elevator floors
For example, for city selection, you can navigate by the first letter of the city name to quickly select the desired city, you can use this component
Menu
Drop-down menus, commonly used for filtering in some forms
Form
Encapsulated form components, can quickly complete the layout of the form, form validation, complex object forms
Forms contain a series of components or methods, including the following
- Form
- form items
- Form Submission
- Form Reset
- Object Forms
- Array Forms
- Array form operation management
- Getting the form context
- Proxying values and events to forms
Input Input box
Encapsulation of Taro Input, some new properties, basically no style, need to write their own style
Textarea Multi-line text
Wrapper for Taro Textarea with new properties
Picker Selector
The selector contains a single-column selector and a multi-column selector.
PickerDate Date Selection
For date and time selection
Radio Single Choice
radio component
Checkbox Multiple Choice
multi-select component
Switch
Switch Assembly
Calendar
In order to be compatible with multiple ends, so the calendar component written to support the day, week, range selection, support a variety of ways to customize the calendar
Grade Rating
scoring component
Cascade Cascade Selection
A feature-rich cascade selector that supports single and multiple selection, multi-level selection, single-level selection, and much more!
CardSelect Card Selection
A richly styled card type selector that supports both single and multiple selection modes
Upload Upload
Components for uploading images or videos
ModalForm Popup Form
Used to encapsulate other forms into a popup form, e.g. single column selector, date selector are encapsulated by this component
Included here are
- ModalForm Single out a single form to be used as a form in the
- ModalForms pops up multiple forms with independent content, placed anywhere within the form
NumberKeyboard
Used for numeric input, e.g. entering verification codes, payment passwords, phone numbers, ID cards, etc.
InputCode Authentication code password input
The CAPTCHA input functionality is usually implemented in conjunction with the NumberKeyboard component.
LicensePlate License plate number input
License plate number input component
Text
Encapsulation of Text, thematic configuration of theme colors, font sizes, etc., and encapsulation of shortcut attributes of commonly used css
Image
Wrapping of the image, the implementation of the preview, multi-image preview, in the RN side of the use of expo-image implementation, to provide better performance
Badge Logo
Used to display the number of unread messages, the red dot
Tag Tags
Label Display
Avatar
Show an avatar or group of avatars
HtmlView Rich Text Display
For displaying rich text
Step
Express update logs, for example, can be implemented with this component
Empty Empty data
This component can be used to display some lists when the data is empty.
Status corner status
Status displayed in the four corners of the card
LongPress
Long press event encapsulation
TouchableOpacity Touch feedback
Click on a component with an opaque effect
Modal pop-up box
Pop up the content to the center of the screen
DropDown Menu
Pop up a menu where the element does its work
loading Show loading animation
Show loading animation
message Message
Display a message notification
confirm Confirmation popup box
Calling a confirmation popup asynchronously
Sign Signature
Handwritten Signature Component
Horse*Lottery Happy Horse * Lottery
Sweepstakes component that can randomize results or specify them asynchronously
summarize
As you can see, the component library is rich and covers a lot of usage scenarios
For details on how to use it, please go to the development documentation
Development Documentation:
GitHub：/duxapp