Segment - Semantic UI

element Segment <ui-segment> {

// A segment is used to create a grouping of related content

// export Segment

types { // 5 { … }

emphasis : "primary" | "secondary" | "tertiary" // be emphasized in a layout

"primary" — have primary emphasis

"secondary" — have secondary emphasis

"tertiary" — have tertiary emphasis

vertical : boolean // format content to be aligned as part of a vertical group

raised : boolean // be formatted to raise above the page

stacked : boolean // be formatted to show it contains multiple pages

piled : boolean // be formatted to look like a pile of pages

}

states { // 2 { … }

disabled : boolean // show its content is disabled

loading : boolean // show its content is being loaded

}

variations { // 10 { … }

attached : "top-attached" | "attached" | "bottom-attached" // be attached to other content on a page

"top-attached" — be attached on top side only

"attached" — be attached on both sides

"bottom-attached" — be attached on bottom side only

padded : "padded" | "very" // increase its padding

"padded" — have standard increased padding

"very" — have extra increased padding

inline : boolean // can appear inline

compact : "compact" | "very" [compound] // reduce its padding

"compact" — reduce its padding slightly

"very" — reduce its padding greatly

"red"

"orange"

"yellow"

"olive"

"green"

"teal"

"blue"

"violet"

"purple"

"pink"

"brown"

"grey"

"black"

circular : boolean // be circular

clearing : boolean // clear floated content

floated : "left" | "right" // align to the left or right of its container

"left" — appear to the left of content

"right" — appear to the right of content

text-align : "left-aligned" | "center-aligned" | "right-aligned" // have its text aligned

"left-aligned" — align content to the left

"center-aligned" — align content to the center

"right-aligned" — align content to the right

basic : boolean // have no special formatting

}

plural <ui-segments> { { … }

shares : raised, stacked, piled, compact, basic

horizontal : boolean // be arranged horizontally

}

import {
  EMPHASIS_TYPE,
  DISABLED_STATE,
  LOADING_STATE,
  COMPACT_VARIATION,
  PADDED_VARIATION,
  FLOATED_VARIATION,
  HORIZONTAL_ALIGNED_VARIATION,
} from '@semantic-ui/specs';

export default {
  uiType: 'element',
  name: 'Segment',
  description: 'A segment is used to create a grouping of related content',
  tagName: 'ui-segment',
  exportName: 'Segment',

  content: [],

  types: [
    EMPHASIS_TYPE,
    {
      name: 'Vertical',
      attribute: 'vertical',
      description: 'format content to be aligned as part of a vertical group',
      usageLevel: 2,
    },
    {
      name: 'Raised',
      attribute: 'raised',
      description: 'be formatted to raise above the page',
      usageLevel: 3,
    },
    {
      name: 'Stacked',
      attribute: 'stacked',
      description: 'be formatted to show it contains multiple pages',
      usageLevel: 5,
    },
    {
      name: 'Piled',
      attribute: 'piled',
      description: 'be formatted to look like a pile of pages',
      usageLevel: 5,
    },
  ],

  states: [
    {
      name: 'Disabled',
      attribute: 'disabled',
      description: 'show its content is disabled',
      usageLevel: 2,
    },
    {
      name: 'Loading',
      attribute: 'loading',
      description: 'show its content is being loaded',
      usageLevel: 2,
    },
  ],

  variations: [
    {
      name: 'Attached',
      attribute: 'attached',
      description: 'be attached to other content on a page',
      includeAttributeClass: true,
      options: [
        {
          name: 'Top Attached',
          value: 'top-attached',
          description: 'be attached on top side only',
        },
        {
          name: 'Attached',
          value: 'attached',
          description: 'be attached on both sides',
        },
        {
          name: 'Bottom Attached',
          value: 'bottom-attached',
          description: 'be attached on bottom side only',
        },
      ],
      usageLevel: 2,
    },
    PADDED_VARIATION,
    {
      name: 'Inline',
      attribute: 'inline',
      usageLevel: 3,
      description: 'can appear inline',
    },
    COMPACT_VARIATION,
    {
      name: 'Colored',
      attribute: 'color',
      description: 'be colored',
      includeAttributeClass: true,
      options: [
        { name: 'Red', value: 'red' },
        { name: 'Orange', value: 'orange' },
        { name: 'Yellow', value: 'yellow' },
        { name: 'Olive', value: 'olive' },
        { name: 'Green', value: 'green' },
        { name: 'Teal', value: 'teal' },
        { name: 'Blue', value: 'blue' },
        { name: 'Violet', value: 'violet' },
        { name: 'Purple', value: 'purple' },
        { name: 'Pink', value: 'pink' },
        { name: 'Brown', value: 'brown' },
        { name: 'Grey', value: 'grey' },
        { name: 'Black', value: 'black' },
      ],
      usageLevel: 2,
    },
    {
      name: 'Circular',
      attribute: 'circular',
      description: 'be circular',
      usageLevel: 3,
    },
    {
      name: 'Clearing',
      attribute: 'clearing',
      description: 'clear floated content',
      usageLevel: 3,
    },
    FLOATED_VARIATION,
    HORIZONTAL_ALIGNED_VARIATION,
    {
      name: 'Basic',
      attribute: 'basic',
      description: 'have no special formatting',
      usageLevel: 2,
    },
  ],

  events: [],
  settings: [],

  supportsPlural: true,
  pluralName: 'Segments',
  pluralTagName: 'ui-segments',
  pluralExportName: 'Segments',
  pluralDescription: 'Segments can be grouped together',

  pluralContent: [],

  pluralSharedTypes: ['raised', 'stacked', 'piled'],

  pluralOnlyTypes: [
    {
      name: 'Horizontal',
      attribute: 'horizontal',
      description: 'be arranged horizontally',
      usageLevel: 3,
    },
  ],

  pluralSharedVariations: ['compact', 'basic'],

  pluralOnlyVariations: [],

  examples: {
    defaultAttributes: {},
    defaultPluralContent: `<ui-segment>First</ui-segment>
<ui-segment>Second</ui-segment>
<ui-segment>Third</ui-segment>`,
  },
};

{ "uiType": "element", "name": "Segment", "description": "A segment is used to create a grouping of related content", "tagName": "ui-segment", "exportName": "Segment", "content": [], "types": [ { "name": "Emphasis", "attribute": "emphasis", "includeAttributeClass": true, "usageLevel": 2, "description": "be emphasized in a layout", "options": [ { "name": "Primary", "value": "primary", "description": "have primary emphasis" }, { "name": "Secondary", "value": "secondary", "description": "have secondary emphasis" }, { "name": "Tertiary", "value": "tertiary", "description": "have tertiary emphasis" } ] }, { "name": "Vertical", "attribute": "vertical", "description": "format content to be aligned as part of a vertical group", "usageLevel": 2 }, { "name": "Raised", "attribute": "raised", "description": "be formatted to raise above the page", "usageLevel": 3 }, { "name": "Stacked", "attribute": "stacked", "description": "be formatted to show it contains multiple pages", "usageLevel": 5 }, { "name": "Piled", "attribute": "piled", "description": "be formatted to look like a pile of pages", "usageLevel": 5 } ], "states": [ { "name": "Disabled", "attribute": "disabled", "description": "show its content is disabled", "usageLevel": 2 }, { "name": "Loading", "attribute": "loading", "description": "show its content is being loaded", "usageLevel": 2 } ], "variations": [ { "name": "Attached", "attribute": "attached", "description": "be attached to other content on a page", "includeAttributeClass": true, "options": [ { "name": "Top Attached", "value": "top-attached", "description": "be attached on top side only" }, { "name": "Attached", "value": "attached", "description": "be attached on both sides" }, { "name": "Bottom Attached", "value": "bottom-attached", "description": "be attached on bottom side only" } ], "usageLevel": 2 }, { "name": "Padded", "attribute": "padded", "usageLevel": 2, "description": "increase its padding", "options": [ { "name": "Padded", "value": "padded", "description": "have standard increased padding" }, { "name": "Very Padded", "value": "very", "description": "have extra increased padding" } ] }, { "name": "Inline", "attribute": "inline", "usageLevel": 3, "description": "can appear inline" }, { "name": "Compact", "attribute": "compact", "usageLevel": 3, "description": "reduce its padding", "compoundAliases": true, "options": [ { "name": "Compact", "value": "compact", "description": "reduce its padding slightly" }, { "name": "Very Compact", "value": "very", "description": "reduce its padding greatly" } ] }, { "name": "Colored", "attribute": "color", "description": "be colored", "includeAttributeClass": true, "options": [ { "name": "Red", "value": "red" }, { "name": "Orange", "value": "orange" }, { "name": "Yellow", "value": "yellow" }, { "name": "Olive", "value": "olive" }, { "name": "Green", "value": "green" }, { "name": "Teal", "value": "teal" }, { "name": "Blue", "value": "blue" }, { "name": "Violet", "value": "violet" }, { "name": "Purple", "value": "purple" }, { "name": "Pink", "value": "pink" }, { "name": "Brown", "value": "brown" }, { "name": "Grey", "value": "grey" }, { "name": "Black", "value": "black" } ], "usageLevel": 2 }, { "name": "Circular", "attribute": "circular", "description": "be circular", "usageLevel": 3 }, { "name": "Clearing", "attribute": "clearing", "description": "clear floated content", "usageLevel": 3 }, { "name": "Floated", "attribute": "floated", "usageLevel": 1, "description": "align to the left or right of its container", "options": [ { "name": "Left Floated", "value": "left", "description": "appear to the left of content" }, { "name": "Right Floated", "value": "right", "description": "appear to the right of content" } ] }, { "name": "Text Alignment", "attribute": "text-align", "usageLevel": 2, "description": "have its text aligned", "options": [ { "name": "Left Aligned", "value": "left-aligned", "description": "align content to the left" }, { "name": "Center Aligned", "value": "center-aligned", "description": "align content to the center" }, { "name": "Right Aligned", "value": "right-aligned", "description": "align content to the right" } ] }, { "name": "Basic", "attribute": "basic", "description": "have no special formatting", "usageLevel": 2 } ], "events": [], "settings": [], "supportsPlural": true, "pluralName": "Segments", "pluralTagName": "ui-segments", "pluralExportName": "Segments", "pluralDescription": "Segments can be grouped together", "pluralContent": [], "pluralSharedTypes": [ "raised", "stacked", "piled" ], "pluralOnlyTypes": [ { "name": "Horizontal", "attribute": "horizontal", "description": "be arranged horizontally", "usageLevel": 3 } ], "pluralSharedVariations": [ "compact", "basic" ], "pluralOnlyVariations": [], "examples": { "defaultAttributes": {}, "defaultPluralContent": "<ui-segment>First</ui-segment>\n<ui-segment>Second</ui-segment>\n<ui-segment>Third</ui-segment>" } }