1.0.0-rc.7 • Published 6 months ago
@morpheme/text v1.0.0-rc.7
Morpheme Text
Morpheme Text Component.
Installation
npm
npm i @morpheme/text
yarn
yarn add @morpheme/text
pnpm
pnpm i @morpheme/text
Usage
<script setup lang="ts">
// import component
import VText from '@morpheme/text';
// import styles
import '@morpheme/text/dist/style.css';
</script>
<template>
<VText>Hello World</VText>
</template>
Font Weight
<script setup lang="ts">
// import component
import VText from '@morpheme/text';
// import styles
import '@morpheme/text/dist/style.css';
</script>
<template>
<VText font-weight="semibold">Hello World</VText>
</template>
Variant
<script setup lang="ts">
// import component
import VText from '@morpheme/text';
// import styles
import '@morpheme/text/dist/style.css';
</script>
<template>
<VText variant="xs">Hello World</VText>
<VText variant="sm">Hello World</VText>
<VText variant="md">Hello World</VText>
<VText variant="lg">Hello World</VText>
<VText variant="xl">Hello World</VText>
<VText variant="display-xs">Hello World</VText>
<VText variant="display-sm">Hello World</VText>
<VText variant="display-md">Hello World</VText>
<VText variant="display-lg">Hello World</VText>
<VText variant="display-xl">Hello World</VText>
</template>
Colors
<script setup lang="ts">
// import component
import VText from '@morpheme/text';
// import styles
import '@morpheme/text/dist/style.css';
</script>
<template>
<VText color="primary" variant="display-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</VText>
<VText color="secondary" variant="display-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</VText>
<VText color="info" variant="display-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</VText>
<VText color="warning" variant="display-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</VText>
<VText color="error" variant="display-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</VText>
<VText color="success" variant="display-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</VText>
<!-- design token color -->
<VText color="rose.700" variant="display-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</VText>
<!-- custom color -->
<VText color="#FF87A0" variant="display-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</VText>
<VText color="lightblue" variant="display-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</VText>
<!-- unspecify color -->
<VText variant="display-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</VText>
</template>
Documentation
View Tooltip
documentation here.
License
MIT
1.0.0-canary1.74
8 months ago
1.0.0-next.39
10 months ago
1.0.0-edge.2
6 months ago
1.0.0-edge.7
6 months ago
1.0.0-alpha.1
6 months ago
1.0.0-alpha.100
7 months ago
1.0.0-canary2.75
8 months ago
1.0.0-rc.7
6 months ago
1.0.0-beta.11
10 months ago
1.0.0-next2.41
9 months ago
1.0.0-edge.11
6 months ago
1.0.0-rc.3
6 months ago
1.0.0-rc.4
6 months ago
1.0.0-next.4
9 months ago
1.0.0-next.5
9 months ago
1.0.0-rc.0
8 months ago
1.0.0-beta.10
11 months ago
1.0.0-alpha.40
12 months ago
1.0.0-alpha.32
12 months ago
1.0.0-alpha.53
12 months ago
1.0.0-beta.9
11 months ago
1.0.0-alpha.27
12 months ago
1.0.0-alpha.222
11 months ago
1.0.0-alpha.37
12 months ago
1.0.0-alpha.69
12 months ago
1.0.0-beta.8
1 year ago
1.0.0-alpha.13
1 year ago
1.0.0-alpha.10
1 year ago
1.0.0-alpha.6
1 year ago
1.0.0-alpha.2
1 year ago
1.0.0-beta.7
1 year ago
1.0.0-alpha.46
1 year ago
1.0.0-alpha.39
1 year ago
1.0.0-beta.6
1 year ago
1.0.0-alpha.21
1 year ago