antd-mobile/es/button/style/index.js

基于 React 的移动设计规范实现

import variables from '../../style/themes/default';
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
    container: {
        flexDirection: 'row'
    },
    defaultHighlight: {
        backgroundColor: variables.fill_tap,
        borderColor: variables.border_color_base
    },
    primaryHighlight: {
        backgroundColor: variables.primary_button_fill_tap,
        borderColor: variables.primary_button_fill
    },
    ghostHighlight: {
        backgroundColor: variables.ghost_button_fill_tap,
        borderColor: variables.ghost_button_color
    },
    warningHighlight: {
        backgroundColor: variables.brand_warning,
        borderColor: variables.brand_warning
    },
    wrapperStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: variables.radius_md,
        borderWidth: 1
    },
    largeRaw: {
        height: variables.button_height,
        paddingLeft: variables.h_spacing_lg,
        paddingRight: variables.h_spacing_lg
    },
    smallRaw: {
        height: variables.button_height_sm,
        paddingLeft: variables.h_spacing_sm,
        paddingRight: variables.h_spacing_sm
    },
    defaultRaw: {
        backgroundColor: variables.fill_base,
        borderColor: variables.border_color_base
    },
    primaryRaw: {
        backgroundColor: variables.primary_button_fill,
        borderColor: variables.primary_button_fill
    },
    ghostRaw: {
        backgroundColor: 'transparent',
        borderColor: variables.ghost_button_color
    },
    warningRaw: {
        backgroundColor: variables.fill_base,
        borderColor: variables.brand_warning
    },
    disabledRaw: {
        backgroundColor: variables.fill_disabled,
        borderColor: variables.fill_disabled
    },
    defaultHighlightText: {
        color: variables.color_text_base
    },
    primaryHighlightText: {
        color: variables.color_text_base_inverse
    },
    ghostHighlightText: {
        color: variables.color_text_base_inverse
    },
    warningHighlightText: {
        color: variables.color_text_base_inverse
    },
    largeRawText: {
        fontSize: variables.button_font_size
    },
    smallRawText: {
        fontSize: variables.button_font_size_sm
    },
    defaultRawText: {
        color: variables.color_text_base
    },
    primaryRawText: {
        color: variables.color_text_base_inverse
    },
    ghostRawText: {
        color: variables.ghost_button_color
    },
    warningRawText: {
        color: variables.brand_warning
    },
    disabledRawText: {
        color: variables.color_text_disabled
    },
    indicator: {
        marginRight: variables.h_spacing_md
    }
});