playbook_ui_docs 12.30.0.pre.alpha.PLAY906multilevelselectedidsprop902 → 12.30.1.pre.alpha.PLAY802responsivetitlekit909
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_title/docs/_title_responsive.html.erb +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_responsive.jsx +16 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_responsive.md +1 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
- data/dist/playbook-doc.js +3 -3
- metadata +4 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c23e361b6b8faaac63b5556229a71d0b07a515a9a5577c8442916b58fe19849b
|
|
4
|
+
data.tar.gz: f7d4065b32620b6c29a0d76151a8ec9e2a0b30db90f150e91a8e0813aa1ad4df
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7ededa65bb353427b3c7d6d48ab8ba60274a6745098a78caffa5160095d681952e5d2b5f9a207ab271cdbe07a5b48bc0f4bc5788241ad6b5d3110011df12f612
|
|
7
|
+
data.tar.gz: e6b5832805f48f7c625b338a5ae8f9fc57db0bd4bc94018f4b1d6d86473b7b1fc8f216b0df7167356276b4e5bf0828544ac78716621e472064d30b2dc59783d0
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<%= pb_rails("title", props: { text: "Responsive Title", tag: "h1", size: {xs: 3, sm: 2, md: 1} }) %>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Title from '../_title'
|
|
3
|
+
|
|
4
|
+
const TitleResponsive = (props) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
<Title
|
|
8
|
+
size={{xs: "3", sm: "2", md: "1"}}
|
|
9
|
+
text="Responsive Title"
|
|
10
|
+
{...props}
|
|
11
|
+
/>
|
|
12
|
+
</>
|
|
13
|
+
)
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default TitleResponsive
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `size` prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.
|
|
@@ -3,8 +3,10 @@ examples:
|
|
|
3
3
|
- title_default: Default UI
|
|
4
4
|
- title_light_weight: Light Weight UI
|
|
5
5
|
- title_colors: Colors
|
|
6
|
+
- title_responsive: Responsive
|
|
6
7
|
|
|
7
8
|
react:
|
|
8
9
|
- title_default: Default UI
|
|
9
10
|
- title_light_weight: Light Weight UI
|
|
10
11
|
- title_colors: Colors
|
|
12
|
+
- title_responsive: Responsive
|