ดาวน์โหลด styled theme - การดาวน์โหลดรหัส styled theme

styled theme

ดาวน์โหลดแบบอักษร

1.0.0

ดาวน์โหลด

The Styled-theme ??

ระบบธีมสำหรับองค์ประกอบสไตล์?

ติดตั้ง

 $ npm install --save styled-theme

การใช้งาน

เล่นกับมันบน webpackbin

 import styled from 'styled-components'
import { font , palette } from 'styled-theme' 

const Text = styled . span `
  font-family: ${ font ( 'primary' ) } ;
  background-color: ${ palette ( 1 ) } ;
  color: ${ palette ( 'grayscale' , 0 , true ) } ;
`

Text . defaultProps = {
  palette : 'primary'
}

 < Text > Hello </ Text >

 < Text reverse > Hello </ Text >

 < Text palette = "secondary" > Hello </ Text >

ให้ธีมของคุณเอง

 import { ThemeProvider } from 'styled-components'

const xmasTheme = {
  fonts : {
    primary : 'Georgia, serif'
  } ,
  palette : {
    // red gradient
    primary : [ '#D32F2F' , '#F44336' , '#F8877F' , '#FFCDD2' ]
  }
}

< ThemeProvider theme = { xmasTheme } >
  < Text > Hello </ Text >
< / ThemeProvider>

โครงสร้างธีมเริ่มต้น

นี่คือเนื้อหาของ src/theme.js :

 import coolorsToHex from 'coolors-to-hex'
import { reversePalette } from './composer'

const theme = { }

theme . palette = {
  primary : coolorsToHex ( 'https://coolors.co/1976d2-2196f3-71bcf7-97cef9-c2e2fb' ) ,
  secondary : coolorsToHex ( 'https://coolors.co/c2185b-e91e63-f06292-f48caf-f8bbd0' ) ,
  danger : coolorsToHex ( 'https://coolors.co/d32f2f-f44336-f8877f-f9a7a1-ffcdd2' ) ,
  alert : coolorsToHex ( 'https://coolors.co/ffa000-ffc107-ffd761-ffecb3-fff2ce' ) ,
  success : coolorsToHex ( 'https://coolors.co/388e3c-4caf50-7cc47f-9fd4a1-c8e6c9' ) ,
  grayscale : [ '#212121' , '#616161' , '#9e9e9e' , '#bdbdbd' , '#e0e0e0' , '#ffffff' ]
}

theme . reversePalette = reversePalette ( theme . palette )

theme . fonts = {
  primary : 'Helvetica Neue, Helvetica, Roboto, sans-serif' ,
  pre : 'Consolas, Liberation Mono, Menlo, Courier, monospace' ,
  quote : 'Georgia, serif'
}

theme . sizes = {
  maxWidth : '1100px'
}

export default theme

reversePalette เป็นวิธีการช่วย นำเข้าจาก styled-theme/composer

API

การย้อนกลับ

คืนจาน

พารามิเตอร์

จาน palette

ตัวอย่าง

 reversePalette ( { primary : [ 'red' , 'yellow' , 'green' ] } )
// { primary: ['green', 'yellow', 'red'] }

ส่งคืน จานสี

สำคัญ

ส่งคืนค่าของ props.theme[path] หรือ styledTheme[path]

พารามิเตอร์

path (String | Array <String>)
defaultValue ใด ๆ

ตัวอย่าง

 const Button = styled . button `
 font-family: ${ key ( 'fonts.primary' ) } ;
 color: ${ key ( [ 'colors' , 'primary' , 0 ] ) } ;
`

ส่งคืน ใด ๆ

แบบอักษร

ชวเลขถึง key(['fonts', path])

พารามิเตอร์

path
defaultValue ใด ๆ

ตัวอย่าง

 const Button = styled . button `
 font-family: ${ font ( 'primary' ) } ;
`

ส่งคืน แบบอักษร

ขนาด

ชวเลขถึง key(['sizes', path])

พารามิเตอร์

path
defaultValue ใด ๆ

ตัวอย่าง

 const Button = styled . button `
 padding: ${ size ( 'padding' ) } ;
`

ส่งคืน ขนาด

จานสี

ส่งคืนค่าของ props.theme[palette || reversePalette][path][index] หรือ styledTheme[palette || reversePalette][path][index] (ชุดรูปแบบเริ่มต้น)

ข้อโต้แย้งสามารถส่งผ่านในลำดับใด ๆ ตราบใดที่มีการเก็บรักษาประเภท

พารามิเตอร์

หมายเลข index ดัชนีของโทนเสียงในชุดโทนสีสัน
สตริง path ? กุญแจสำคัญของโทนเสียงในวัตถุชุดรูปแบบ (ตัวเลือก, props.palette เริ่มต้น)
ข้อ exceptions วัตถุ? วัตถุที่มีเส้นทางเป็นคีย์และดัชนีเป็นค่า
บูลีน reverse ? ธงเพื่อส่งคืนเสียงจาก reversePalette หรือ palette
สตริง defaultValue ? ค่าเริ่มต้น
args ... ใด ๆ

ตัวอย่าง

 // index = 1
// exception = { grayscale: 0 }
// reverse = true
const Button = styled . button `
 background-color: ${ palette ( { grayscale : 0 } , 1 , true ) } ;
`

// renders props.theme.reversePalette.grayscale[0]
< Button palette = "grayscale" / >

// renders props.theme.palette.danger[1] (nullify reverse)
< Button palette = "danger" reverse />