Storybook Addon Spotify

Storybook Addon Spotify 可用于轻松嵌入 Spotify iframe，以便在 Storybook 面板内显示所有可用类型的 Spotify 内容，例如播放列表、专辑、歌曲、播客或单集。

安装

npm install storybook-spotify --save-dev

基本设置

在 Storybook 配置的 main.js 中添加以下代码

module.exports = {
  addons: ['storybook-spotify'],
};

使用键值 version 设置你的故事参数，以便提供需要显示的信息。

配置

属性	必需	值类型	描述	示例
url	✔	string	Spotify 源	https://open.spotify.com/playlist/4gV0IA40bGoAG1Rla7oZzQ?si=c9730ce8d8f349d3

用法

export const parameters = {
  spotify: {
    url: 'https://open.spotify.com/embed/playlist/4gV0IA40bGoAG1Rla7oZzQ?si=c9730ce8d8f349d3'
  }
}

故事设置示例

在默认的故事配置中添加 version 参数

import React from 'react'

export default {
  title: 'Component Button',
  parameters: {
    spotify: {
      url: 'https://open.spotify.com/embed/playlist/4gV0IA40bGoAG1Rla7oZzQ?si=c9730ce8d8f349d3'
    }
  }
}

示例

播放列表

专辑

歌曲

播客

单集