Socket
Socket
Sign inDemoInstall

@morpheme/text

Package Overview
Dependencies
3
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @morpheme/text

Morpheme Text Component


Version published
Maintainers
1
Install size
12.8 MB
Created

Readme

Source

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

Keywords

FAQs

Last updated on 14 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc