Skip to content

Hansoo-mzc/mirinae

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mirinae - Cloudforet Design System




🧩 Mirinae Design System

Mirinae Storybook



👨‍👩‍👧 Author

See our OWNERS file.



📝 License

This project is Apache 2.0 licensed.



Chart License

Mirinae design system internally uses amCharts for Dynamic Chart.
Before using the design system, look carefully at amCharts' license.
If you want to purchase the amCharts license that suits you and use it on your application, see the license FAQ.

https://www.amcharts.com/online-store/licenses-explained/

How to Use

1. Install

npm install @spaceone/design-system vue vue-router vue-i18n vue-fragment @amcharts

2. Set plugin

Add following lines to main.js file.

import MirinaeDesignSystem from '@spaceone/design-system';

Vue.use(MirinaeDesignSystem, pluginOptions);

Plugin Options

Option Description
installVueRouter Whether to install Vue Router. Some components use Vue Router, so don't give this option if you have already installed it in your application.
installVueI18n Whether to install Vue I18n. Some components use Vue I18n, so don't give this option if you have already installed it in your application.
installFragment Whether to install Vue Fragment. Some components use Vue Fragment, so don't give this option if you have already installed it in your application.
amchartsLicenses If you use the amcharts library such as Dynamic Chart, license the amcharts as a string array.
interface MirinaeDSOptions {
    installVueRouter?: boolean;
    installVueI18n?: boolean;
    installFragment?: boolean;
    amchartsLicenses?: string[];
}

3. Set components locally

Example:

import { PButtonTab, PDynamicLayout } from '@spaceone/design-system';

export default {
    components: {
        PButtonTab,
        PDynamicLayout,
    },
    ...
}

How to Apply Styles

Mirinae Design System is based on Tailwindcss.

Global Styles

Case 1. All styles

If your project doesn't use tailwindcss, add the code below to main.ts.

import '@spaceone/design-system/dist/css/style.css';
import '@spaceone/design-system/dist/style.css';

Case 2. Without tailwindcss styles

If your project use tailwindcss, you don't need to import all styles.
In that case, add codes below to your tailwind.config.js.

const mirinaeTailwind = require('@spaceone/design-system/tailwind.config.js')

module.exports = {
    theme: {
        ...mirinaeTailwind.theme,
        // your customized theme
    },
    variants: [...mirinaeTailwind.variants, 
    //your customized variants 
    ],
    plugins: [
        ...mirinaeTailwind.plugins,
        //your customized plugins 
    ]
}

Also, you need to add codes below to your main.js.

import '@spaceone/design-system/dist/css/light-style.css';
import '@spaceone/design-system/dist/style.css';

About

Design System for Cloudforet

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 96.0%
  • TypeScript 1.9%
  • Vue 1.8%
  • Other 0.3%