huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added new examples for switch components (React, Vue) (#245)

Browse Source 
* Added new example for switch component (React)

* Added new example for switch component (Vue)
This commit is contained in:
Alexander Bluhm
2021-02-19 13:21:54 +01:00
committed by Robin Malfait
parent 3222548bab
commit e53a562d9f
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/@headlessui-react/README.md
+4 -4
View File
@@ -1286,12 +1286,12 @@ function NotificationsToggle() {
onChange={setEnabled}
className={`${
enabled ? 'bg-blue-600' : 'bg-gray-200'
} relative inline-flex h-6 rounded-full w-8`}
} relative inline-flex items-center h-6 rounded-full w-11`}
>
<span className="sr-only">Enable notifications</span>
<span
className={`${
enabled ? 'translate-x-4' : 'translate-x-0'
enabled ? 'translate-x-6' : 'translate-x-1'
} inline-block w-4 h-4 transform bg-white rounded-full`}
/>
</Switch>
@@ -1320,11 +1320,11 @@ function NotificationsToggle() {
onChange={setEnabled}
className={`${
enabled ? 'bg-blue-600' : 'bg-gray-200'
} relative inline-flex h-6 rounded-full w-8`}
} relative inline-flex items-center h-6 rounded-full w-11`}
>
<span
className={`${
enabled ? 'translate-x-4' : 'translate-x-0'
enabled ? 'translate-x-6' : 'translate-x-1'
} inline-block w-4 h-4 transform bg-white rounded-full`}
/>
</Switch>
packages/@headlessui-vue/README.md
+4 -4
View File
@@ -1093,13 +1093,13 @@ Switches are built using the `Switch` component. Optionally you can also use the
<Switch
as="button"
v-model="switchValue"
class="relative inline-flex w-8 h-6 rounded-full"
class="relative inline-flex items-center h-6 rounded-full w-11"
:class="switchValue ? 'bg-blue-600' : 'bg-gray-200'"
v-slot="{ checked }"
>
<span
class="inline-block w-4 h-4 transform bg-white rounded-full"
:class="{ 'translate-x-5': checked, 'translate-x-0': !checked }"
:class="{ 'translate-x-6': checked, 'translate-x-1': !checked }"
/>
</Switch>
</template>
@@ -1140,13 +1140,13 @@ Clicking the label will toggle the switch state, like you'd expect from a native
<Switch
as="button"
v-model="switchValue"
class="relative inline-flex w-8 h-6 rounded-full"
class="relative inline-flex items-center h-6 rounded-full w-11"
:class="switchValue ? 'bg-blue-600' : 'bg-gray-200'"
v-slot="{ checked }"
>
<span
class="inline-block w-4 h-4 transform bg-white rounded-full"
:class="{ 'translate-x-5': checked, 'translate-x-0': !checked }"
:class="{ 'translate-x-6': checked, 'translate-x-1': !checked }"
/>
</Switch>
</SwitchGroup>